Chrome 开发者工具

在 Chrome 浏览器中按 F12 即可进入 Chrome 开发者工具,如果是 macOS 用户,则使用 option + command + i 组合键。

Chrome 开发者工具窗口如下:

Chrome 开发者工具

Chrome 开发者工具中有多个不同的选项,不同的浏览器选项有所不同,但都有一些通用的选项。

  • Elements 选项:查看当前页面的元素,最左侧的元素(DOM)按钮可以选择网页中的节点,然后在右侧的样式面板中可以修改该节点的一些属性、样式和代码,这些修改均会及时显示在页面中。
  • Console 选项:用来调试 JavaScript,JavaScript 输出的所有内容(包括 console.log() 的输出)和报错信息都在该窗口中显示。不仅如此,在该选项卡的最下方可以执行任意的 JavaScript 代码。
  • Network 选项:执行当前页面的监听任务,所有的请求将会出现在该选项的界面中,包括静态文件的请求、动态接口、AJAX 等异步请求(包含每次的请求头部、请求体及最终的返回内容)。如果进行翻页、刷新、重定向(30X系列重定向等)处理,会主动刷新页面。
  • Sources 选项:查看网页的源代码,可以调试和更改 JavaScript、CSS 及图片等文件,支持断点操作和静态资源预览。不仅如此,在该选项的界面中可以查看 JavaScript 代码执行过程中中间变量的值。
  • Application 选项:查看网页中的缓存和 Cookie。在左侧的节点选择面板中可以打开相应的内容,选择节点后在右侧可以进行该节点的删除或修改操作,这个操作可以更改 Cookie 或 HTML 5 中的缓存值。

Leave a Reply