開發者工具
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 等咧。