Web開發工具
| 有用戶建議將Web开发工具移動至开发者工具。（2024年5月16日） 此移動可能有爭議或者需要管理員協助。提請移動者請在討論頁說明理由以便其它編輯者參與討論。請求若無討論可能不受理。（進行移動） |
Web開發工具（通常稱作DevTools[1]）是一種網頁開發者測試和調試代碼的工具。不同於網站創建器或者集成開發環境，Web 開發工具不直接參與網站的創建，而用於測試網站或網頁應用的用戶界面[1]。
Web開發工具一般內置於網頁瀏覽器或者作為瀏覽器的附加組件使用。大多數市面上常見的網頁瀏覽器，如Google Chrome、Firefox、Internet Explorer、Safari、Microsoft Edge和Opera[2]，都有內置的工具用於網站開發，而在其各自的插件中心可以下載到更多工具。
Web開發工具便於開發人員調試各種瀏覽器網頁處理技術，例如HTML、CSS、DOM、JavaScript。隨着對瀏覽器的功能需求越來越高，[3] 流行的瀏覽器已經包含了更多面向開發者的特性。[4]
瀏覽器支持概覽
一些知名的瀏覽器都支持 Web 開發工具，使得網頁設計師與開發者可以查看其頁面的構成。所有這些工具都內置於瀏覽器，不需要額外的模塊或配置。
- Firefox瀏覽器 – F12 打開網頁控制台/瀏覽器控制台（自Firefox 4以後）。[5][6] 網頁控制台作用於單個頁面；瀏覽器控制台作用於整個瀏覽器。[7]
- Google Chrome[8]
- Internet Explorer和Microsoft Edge[9][10]
- Opera[11]
- Safari[12]
常用特性
使用Web開發工具的通常做法是，鼠標懸停在頁面元素上方，然後在右鍵菜單中選擇「檢查元素」或其它相似選項。更常見的替代方式是使用快捷鍵 F12。[13]
HTML 和 DOM
Web開發工具通常包含了HTML與DOM屬性查看器。這與瀏覽器「查看原始碼」功能的不同之處在於，HTML與DOM屬性查看器不僅允許你查看頁面DOM屬性當前的渲染結果，還允許你查看改動了屬性值之後頁面即時更新的渲染結果。[14]
除了選擇與編輯之外，HTML元素面板通常還會顯示DOM對象的屬性，例如CSS樣式屬性。[15]
擴展與插件
現代瀏覽器支持使用插件或擴展來添加或增強DevTools功能。許多常用的插件實現了Web開發工具沒有的功能，例如禁用JavaScript，禁用CSS等等。例如Vue有Vue的Dev Tools插件[16][17]。
參考文獻
- ^ 1.0 1.1 微軟. DevTools 概述 - Microsoft Edge Developer documentation. learn.microsoft.com. 2023-12-08 [2024-05-16] （中文（中國大陸））.
- ^ 存档副本. [2021-04-05]. （原始內容存檔於2013-03-06）.
- ^ Growing Demand for Web Developers. Bright Hub. [2018-09-06]. （原始內容存檔於2020-06-19）.
- ^ Latest Application Development | Mobile Web Development - App Development, Application Trends. devworks.thinkdigit.com. [2018-09-06]. （原始內容存檔於2014-01-17）.
- ^ The Browser Console. Mozilla Hacks – the Web developer blog. [2018-09-06]. （原始內容存檔於2021-07-16） （美國英語）.
- ^ Web Console. MDN Web Docs. [2018-09-06]. （原始內容存檔於2021-06-25） （美國英語）.
- ^ Browser Console. Mozilla Developer Network. 13 August 2016 [15 March 2017]. （原始內容存檔於2017-05-30）.
- ^ Chrome DevTools Overview - Google Chrome. developer.chrome.com. [2018-09-06]. （原始內容存檔於2018-09-11）.
- ^ McCormick, Libby. F12 Developer Tools (Windows). msdn.microsoft.com. [2018-09-06]. （原始內容存檔於2014-12-24） （美國英語）.
- ^ erikadoyle. Microsoft Edge Developer Tools - Microsoft Edge Development. docs.microsoft.com. [2018-09-06]. （原始內容存檔於2017-10-13） （美國英語）.
- ^ Opera Browser | Faster, Safer, Smarter Web Browser. www.opera.com. [2018-09-06]. （原始內容存檔於2011-08-22） （英語）.
- ^ Inc., Apple. Tools - Safari - Apple Developer. developer.apple.com. [2018-09-06]. （原始內容存檔於2014-09-09） （英語）.
- ^ 存档副本. [2021-07-27]. （原始內容存檔於2013-04-03）.
- ^ McCormick, Libby. Introduction to F12 Developer Tools (Windows). msdn.microsoft.com. [2018-09-06]. （原始內容存檔於2017-11-07） （美國英語）.
- ^ Inspect and Edit Pages and Styles | Tools for Web Developers. Google Developers. [2018-09-06]. （原始內容存檔於2014-03-27） （英語）.
- ^ Vue Devtools. devtools.vuejs.org. [2024-05-16].
- ^ Microsoft. 创建用于自定义 DevTools UI 的扩展 - Microsoft Edge Developer documentation. learn.microsoft.com. 2023-03-29 （中文（中國大陸））.