chrome devTool

在console中访问节点

使用document.querySelectAll()访问元素

使用$0快速访问选中的元素,光标选中的元素，早console中输入$0获取选中元素的dom信息

拷贝 》JS Path    选中选择 copy===》copy js path，在console中输入，

显示就是选中元素的document.querySelectAll()信息，直接回显示选中元素的dom信息

打开控制台，最右边的三个点====》more  tools ===>animations 打开动画面板

 

console面板

1 断点调试

2 及时运行js代码

3 打印日志

document.cookie 查看浏览器的cookie

console中执行js代码，shift+回车 换行，不会执行代码，直接回车，执行js代码

vscode插件live-server可以实现在本地搭建服务器

 

console.log custom 可以定制样式

console.log('%cinfo',styles);在输出的信息前面加上占位符%c就可以定制输出信息的样式

demo:

console.log('%c这里展示定制样式','color:red;font-size:20px;border:1px solid blue;');

console.asset(false,'断言失败');第一个参数是boolean值，相当于try catch中的catch，false的时候，输出断言失败

检测一个方法执行的时间：

console.time() 检测的方法 console.timeEnd()     输出方法执行的时间

 demo:

function demo(){
for(var i=0; i<1000; i++){
    console.log(i)
}}
console.time(); demo(); console.timeEnd()

清空日志：console.clear()

 

调试js代码：

1 如果知道出错的方法位置，就可以在方法中直接写上debugger

2 线上代码调试

打开控制台，切到source面板，

下方显示调试面板，在最后的Event Listener Breakpoints中的mouse 中的有各种鼠标事件，勾选想要监听的事件，在操作的时候就会在对应的地方直接进入debugger

3 直接在source面板中 找到对应的js文件，在左边对应的行数位置点击想要debugger的地方，创建断点

打断点的过程中，我们可以在右侧面板的scope中查看运行时状态中的所有能量的值；watch中可以添加需要实时监听的变量

也可以在console面板中输入要查看的值====》回车，查看变量的值

可以直接在js代码中修改js代码，ctrl+s保存，就暂时保存了代码，可以直接执行修改过的代码

Sources面板简介：

Page 显示当前页面所有的静态资源，ctrl+p 全局搜索文件，并打开

 

 

使用Snippets来辅助Debugging

在sources面板的左侧，调出snippets面板，点击new snippet 添加新的代码片段，在右侧的面板中就可以添加新的代码，写完之后保存，右键点击左侧新建的代码片段文件，点击run就可以执行新添加的代码片段了

 

 

使用DevTools作为代码编辑器

在souces面板中，左侧，跟gage 和Snippets在一起有一个Filesystem面板，点击add folder to workplace,可以将选择的代码文件添加到浏览器的工作空间，

比如，添加当前项目的源文件进来，就可以编辑当前项目的代码，实现实时更改代码的功能；这个时候更改代码就会实时修改源文件，其实就是在这里代码并修改，

实现实时更新

 

Network

查看网页资源请求概览，查看资源分布

针对单一请求查看Request/Response或时间消耗等

分析网页性能优化，使用工具代理页面请求数据等

 ctrl+shift+p 调出命令窗口 sensors

sensors窗口可以调节设备的所在的地理位置 模拟设备触摸 模拟设备感应等

vue 开发工具 vue-dev-tools

react 开发工具 react-dev-tools