Skip to main content

浏览器开发者工具

每一个现代网络浏览器都包含一套强大的开发工具套件。这些工具可以检查当前加载的 HTML、CSS 和 JavaScript，显示每个资源页面的请求以及载入所花费的时间。本文阐述了如何利用浏览器的开发工具的基本功能。

如何调出开发者工具​

在浏览器页面上

  • F12 键 (笔记本电脑 Fn + F12)
  • 右键选择 检查(N)
  • 快捷键 Ctrl + Shift + i

知识点向导​

  1. 常用的四个功能模块：元素（ELements）、控制台（Console）、源代码（Sources），网络（Network）。
  2. 学会断点调试
  3. 学会在开发者模式中修改代码或者css样式
  4. 查看元素的监听事件
  5. 通过控制台进行调试和查看日志
  6. 学会通过开发者模式下载资源（可下载不开放下载的资源）
  7. 学会编辑页面上的任何文本（在控制台输入document.body.contentEditable="true"或者document.designMode = 'on'）

开发者模式的功能非常多，有兴趣可以多多探索