【九月打卡】第12天 Chrome DevTools开发者工具学习

第一模块：

课程名称：Chrome DevTools开发者工具调试指南

章节名称：4-1 ~ 4-6 

讲师姓名：宗泽

第二模块：

内容概述：

本章是课程的核心章节，通过学习可以掌握调试页面JavaScript脚本最常用的方法，包括调试Log，断点调试，在源代码中调试等等。

第三模块：

学习心得：

第四章 使用Console调试JavaScript

发现问题--->定位问题--->解决问题

Console面板功能简介：

1.运行JavaScript代码的实时环境

2.查看程序中打印的Log日志

3.断点调试代码Debugging

Console面板，本质上是一个就是一个js代码的实时运行环境，同时也是使用代码与浏览器进行交流的入口。

比如：

在Console面板，调用浏览器的接口：document.cookie 、document.querySelectorAll('xxx')等

在Console面板:

回车：执行js代码

shift+回车：换行

console对象是浏览器提供的一个原生对象，这个对象有20几种方法

eg：

console.log()：打印信息

console.warn(): 打印警告信息（黄色的）

console.error(): 打印错误信息（红色的）

一般用在try｛｝catch｛｝中的catch中

console.table(): 打印json格式的数据（也就是复杂信息）

eg：

console.group(): 打印有关联的信息组

eg：

语法格式：

console.group("组名")

console.info("xxx")

console.info("xxx")

console.info("xxx")

......

console.groupEnd("组名")

eg的效果：

console  custom 定制样式

eg：

console.log("%c百度2020校园招聘简历提交：http://dwz.cn/XpoFdepe", "color:red"))

效果：

%c：样式占位符

Network网络请求错误展示

eg：

console.assert(): 

eg：console.assert(false, ‘断言失败’) 

效果：

console.assert(false, ‘断言失败’)  相当于一个try catch ，因为try的结果是false，所以输出断言失败

console.time():  用于打印一个代码片段的执行时间

eg：

效果：

所以，格式：

console.time()

代码片段

console.timeEnd()

小计巧：

在Console面板中：

console.clear(): 清除Console面板中的打印信息

4.3 调试javaScript的基本流程+断点调试

调试的基本流程：

有两种：

1.传统：在源码中写console.log 甚至alert() ，来打印运行时信息

             根据运行时打印的信息来进行调试

2. 新方式：利用Chorm devtools 进行JavaScript断点调试

                 做到：运行时调试变量、修改源代码临时保存调试 

                 方式：在源码写debugger

debugger面板的功能键介绍：

：Resume script execution            恢复脚本执行

: Step over next function call         跳过下一个函数的执行

： Step into next function call         跳过下一个函数的执行

： Step  out of current function           退出当前函数

:   单步执行，就是一行一行的执行。注意：这里的“一行一行”就是字面意思的一行一行

调用的栈

断点

异步请求的断点

dom断点（有3中情况的断点）

事件监听的断点

Event listener breakpoints 下有众多的“事件集”，每个事件集下又细分了多个具体事件

我们可以通过“勾选”事件监听的Breakpoints 来做到：触发事件时，来 pause 住代码，也就是进入到“断点”的状态

比较常用的打断点的方式：

既：在有问题的“context”（上下文）处打断点（）

查看debuge时，对应作用域的值：

方式一：利用【Event Listener Breakpoints】的功能

方式二：鼠标hover在变量之上

方式三：esc呼出console面板，在console面板下，输入变量名，回车即可看到对应变量的值

打debugger的方式：

方式一：源码中写debugger

方式二：利用的功能

方式三：Sources面板下直接

临时保存Sources面板做出修改的代码：Ctrl+s。这种保存是作用不到在服务器上的“源码”的

4.4 Sources源代码面板介绍：

解说“1”部分

top下面是一个域名（域名是对 ip地址+端口号的一个封装）

域名下面是这个网站（web应用）所有的静态资源，一般分为3个文件夹：

x.html

x.js

x.css

解说“2”部分

展示对应文件的代码

Ctrl+p ：呼出“文件收索框”，可以用于收索文件

Ctrl+Shift +p ：呼出浏览器命令集的展示，点击一个命令，就会执行该命令

可以在Sources面板中实时编辑源码，并临时保存。浏览器会实时解析出新的效果

Watch: 具体“观察”某个变量的值

4.5 使用Snippets辅助调试Debugging

Snippets是Sources面板下的一个tap

4.6 使用DevTools作为Text IDE

add folder to workspace ：  将文件夹添加到工作区

将文件添加到工作区后，此时就牛逼了！ 此时浏览器得DevTools 就相当于一个编辑器了，可以在编辑添加到工作区的文件，而且是作用到文件本身的！

第四模块：

学习截图：