开发者工具

目录-入口-由此开始-大纲-总览-概括-枢纽-指导-指引-总领 教程-指南-路线 #（前端-dom-bom）开发者工具-devtools

适用范围：

1. 主流先进浏览器

以下浏览器都自带devtools，且基本无区别，本教程无特殊说明，默认不做区分

• Edge
• Chrome
• Firefox

2. 作用：

• 调试JavaScript程序
  • 在代码中使用开发者工具中的debugger打断点
  • 对DOM操作打断点     - 如修改了某个节点, 就进入调试
  • 可以对事件打断点
• Network
  • 可以对网速进行限制
  • 对http请求加上某个浏览器的标识字段
        - 用以反馈给后端用户所使用的浏览器
  • 可以把本地网络交互信息导出, 然后在其他电脑导入, 方便调试
• Application
  • 可以查看浏览器的内存:
        - 如Service workers, localstorage, cookie等
• performance
  • 可以限制cpu的速度, 以模拟缓慢的设备
• Inspector
  • 可以远程真机调试web app、混合app

基本概念

• devtools按功能分为多个标签页

使用教程

1. JavaScript

• child::开发者工具查看源代码
• child::查看某个元素的事件监听器

2. Network

• child::使用开发者工具(调试控制台)查看页面的请求详情

3. Application

• child::查看浏览器缓存

4. Console

• child::控制台

调试

基础

• child::调试指南

5. 远程调试

• child::远程调试