浏览器开发者工具
每一个现代网络浏览器都包含一套强大的开发工具套件。这些工具可以检查当前加载的 HTML、CSS 和 JavaScript,显示每个资源页面的请求以及载入所花费的时间。本文阐述了如何利用浏览器的开发工具的基本功能。
如何调出开发者工具
在浏览器页面上
- F12 键 (笔记本电脑 Fn + F12)
- 右键选择 检查(N)
- 快捷键 Ctrl + Shift + i
知识点向导
- 常用的四个功能模块:元素(ELements)、控制台(Console)、源代码(Sources),网络(Network)。
- 学会断点调试
- 学会在开发者模式中修改代码或者css样式
- 查看元素的监听事件
- 通过控制台进行调试和查看日志
- 学会通过开发者模式下载资源(可下载不开放下载的资源)
- 学会编辑页面上的任何文本(在控制台输入document.body.contentEditable="true"或者document.designMode = 'on')
开发者模式的功能非常多,有兴趣可以多多探索