快捷键备忘

F8：进入下一个断点

F10：单步执行，不进入子函数

F11：单步执行，遇到子函数会进入子函数

shift+F11：跳出当前函数

断点作用

断点可以让程序运行到某一行的时候，把程序的整个运行状态进行冻结。你可以清晰地看到到这一行的所有的作用域变量、函数参数、函数调用堆栈。你可以看到数据是怎么在程序当中流动的，你还可以修改、把玩它们。断点调试让你真正了解一个程序的运作流程。

开发者工具介绍

Elements 页面主体

1.每当你的鼠标移动到任何一个元素上,对应的html视图中会给该元素蓝色的背景。

2.如果你单击选中一个元素,底部会显示该元素在html结构中的位置关系

3.styles选项中编辑该元素的样式,并且看到html结构的实时更新

4.Event Listeners选项,观察该元素绑定的事件

Network 监控页面

监控当前网页所有的http请求,展示的是每个http请求,每个字段表示着该请求的不同属性和状态

1.单击面板中的任意一条http信息,会在底部弹出一个新的面板,其中记录了该条http请求的详细参数

    header(表头信息、返回信息、请求基本状态)
    Preview(返回的格式化转移后文本信息)
    response(转移之前的原始信息)
    Cookies(该请求带的cookies)
    Timing(请求时间变化)
复制代码

Sources 资源列表

展示本界面所加载的资源列表,还有cookie和local storage 、SESSION 等本地存储信息

调试步骤

1.在浏览器中打开需要调试的代码，F12→sources→双击需要调试的文件→点击行号打断点

2.command + o（windows 应该是 control + o），输入 App.js 查找我们的文件：

3.点击行号，JavaScript 会在在第 10 行暂停了，整个应用程序是冻结的状态

Watch 监控执行当前断点所在作用域任何表达式的执行结果
1.点击 Watch 旁边的➕
2.输入 `this.state` 查看数据的结构
3.输入 `this.state.name + 'ok'`查看数据的执行结果

Call Stack 函数的调用堆栈
表示该函数是被哪个 上层函数 调用的，上层函数又是谁调用的

Scope 当前断点的作用域以及所有的闭包作用域以及全局作用域
可以看到所有作用域的变量
复制代码