开发者工具(通常称作DevTools)是一种网页开发者测试和调试代码的工具。不同于或者集成开发环境,Web 开发工具不直接参与网站的创建,而用于测试网站或网页应用的用户界面。
Web开发工具一般内置于网页浏览器或者作为浏览器的附加组件使用。大多数市面上常見的网页浏览器,如Google Chrome、Firefox、Internet Explorer、Safari、Microsoft Edge和(Opera),都有内置的工具用于网站开发,而在其各自的插件中心可以下载到更多工具。
Web开发工具便于开发人员調試各种浏览器网页处理技术,例如HTML、CSS、(DOM)、JavaScript。随着对浏览器的功能需求越来越高, 流行的浏览器已经包含了更多面向开发者的特性。
浏览器支持概览
一些知名的浏览器都支持 Web 开发工具,使得网页设计师与开发者可以查看其页面的构成。所有这些工具都内置于浏览器,不需要额外的模块或配置。
- (Firefox浏览器) – F12 打开网页控制台/浏览器控制台(自Firefox 4以后)。 网页控制台作用于单个页面;浏览器控制台作用于整个浏览器。
- Google Chrome
- Internet Explorer和Microsoft Edge
- (Opera)
- (Safari)
常用特性
使用Web开发工具的通常做法是,鼠标悬停在页面元素上方,然后在(右键菜单)中选择“检查元素”或其它相似选项。更常见的替代方式是使用快捷键 F12。
HTML 和 DOM
Web开发工具通常包含了HTML与DOM属性查看器。这与浏览器“查看源代码”功能的不同之处在于,HTML与DOM属性查看器不仅允许你查看页面DOM属性当前的渲染结果,还允许你查看改动了属性值之后页面即时更新的渲染结果。
除了选择与编辑之外,HTML元素面板通常还会显示DOM对象的属性,例如CSS样式属性。
扩展与插件
现代浏览器支持使用插件或扩展来添加或增强DevTools功能。许多常用的插件实现了Web开发工具没有的功能,例如禁用JavaScript,禁用CSS等等。例如(Vue)有Vue的Dev Tools插件。
参考文献
- 微软. DevTools 概述 - Microsoft Edge Developer documentation. learn.microsoft.com. 2023-12-08 [2024-05-16] (中文(中国大陆)).
- . [2021-04-05]. (原始内容存档于2013-03-06).
- . Bright Hub. [2018-09-06]. (原始内容存档于2020-06-19).
- . devworks.thinkdigit.com. [2018-09-06]. (原始内容存档于2014-01-17).
- . Mozilla Hacks – the Web developer blog. [2018-09-06]. (原始内容存档于2021-07-16) (美国英语).
- . MDN Web Docs. [2018-09-06]. (原始内容存档于2021-06-25) (美国英语).
- . Mozilla Developer Network. 13 August 2016 [15 March 2017]. (原始内容存档于2017-05-30).
- . developer.chrome.com. [2018-09-06]. (原始内容存档于2018-09-11).
- McCormick, Libby. . msdn.microsoft.com. [2018-09-06]. (原始内容存档于2014-12-24) (美国英语).
- erikadoyle. . 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. . developer.apple.com. [2018-09-06]. (原始内容存档于2014-09-09) (英语).
- . [2021-07-27]. (原始内容存档于2013-04-03).
- McCormick, Libby. . msdn.microsoft.com. [2018-09-06]. (原始内容存档于2017-11-07) (美国英语).
- . 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 (中文(中国大陆)).
維基百科,wiki,書籍,書籍,圖書館,文章,文章,閱讀,下載,免費下載,免費下載,MP3,視頻,MP4,3GP,JPG,JPG,JPEG,JPEG,GIF,PNG,PNG,圖片,音樂,音樂,音樂,歌曲,電影,電影,書籍,書籍,遊戲,遊戲,遊戲,遊戲,手機,電話,Android,iOS,Apple,手機,三星,iPhone,Xiomi,xiaomi, 小米,Redmi,Honor,Oppo,Nokia,Sonya,MI,個人電腦,網絡,電腦