跳至內容

開發者工具

出自Taiwan Tongues 台語維基
於 2025年8月23日 (六) 09:22 由 TaiwanTonguesApiRobot留言 | 貢獻 所做的修訂 (從 JSON 檔案批量匯入)

(差異) ←上個修訂 | 已批准修訂 (差異) | 最新修訂 (差異) | 下個修訂→ (差異)

Web 開發工具(通常稱做devtools)是一種網頁開發者測試佮調試代碼的工具。無仝款佇網站創建器抑是集做開發環境,Web 開發工具無直接參與網站的創建,用佇咧測試網站抑是網頁應用的用戶界面。

Web 開發工具一般內置佇咧網頁瀏覽器抑是作為瀏覽器的附加組件使用。大多數市面上定定看著的網頁瀏覽器,如 Google Chrome、Firefox、Internet Explorer、Safari、Microsoft Edge 和 Opera,攏有內置的工具用佇網站開發,佇其各自的插件中心會當下載著閣較濟工具。

Web 開發工具方便開發人員調試各種瀏覽器網頁處理技術,比如講 HTML、CSS、DOM、JavaScript。隨著對瀏覽器的功能需求愈來愈懸,流行的瀏覽器已經包含閣較濟面向開發者的特性。

瀏覽器支持概覽

一寡知名的瀏覽器攏支持 Web 開發工具,予網頁設計師佮開發者會當查看頁面的構成。所有這種工具攏有囥佇咧瀏覽器,無需要額外的模塊抑是配置。

  • Firefox 瀏覽器–` F 十二 ` 拍開網頁控制台 / 瀏覽器控制台 ( 自 Firefox 四以後 )。網頁控制台作用佇孤一个頁面;瀏覽器控制台做伙瀏覽器。
  • Google Chrome
  • Internet Explorer 和 Microsoft Edge
  • Opera
  • Safari

常用特性

使用 Web 開發工具的通常做法是,滑鼠懸停佇咧頁面的元素頂懸,然後佇正菜單中選擇「檢查的元素」抑是按呢相仝選項。閣較捷看的替代方式是使用快捷鍵 ` F 十二 `。

HTML 和 DOM

Web 開發工具通常包含了 HTML 佮 DOM 屬性查看器。這佮瀏覽器「查看原始碼」功能的無仝的所在佇咧,HTML 佮 DOM 屬性查看器毋但允准你查看頁面 DOM 屬性當前的渲染結果,猶閣允准你查看改動了屬性值了後頁面即時更新的渲染結果。

除了選擇佮編輯以外,HTML 元素面枋通常閣會顯示 DOM 對象的屬性,比如講 CSS 樣式屬性。

擴展佮插件

現代瀏覽器支持使用插件抑是擴展來添加抑是增強功能。真濟捷用的插件實現矣 Web 開發工具無的功能,譬如講禁用 JavaScript,禁用 CSS 等咧。

參考文獻