Google Chrome 调试JS简单教程

                          Google Chrome 调试JS简单教程

 

一、移动端开发调试

现在新版chrome弹出控制台后如下图，其中的工具对移动端调试非常方便。

 
在控制台中可以直接模拟手机、调整UA、修改网络连接状态

 

二、Elements标签页

这个就是查看、编辑页面上的元素，包括HTML和CSS：
左侧就是对页面HTML结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性，或者你点右键选;Edit as Html;直接对元素的HTML进行编辑，或者删除某个元素，所有的修改都会即时在页面上得到呈现。
 

三、Console标签页

就是Javascript控制台了：
在这个面板可以查看错误信息、打印调试信息（console.log()）、写一些测试脚本，还可以当作Javascript API查看用。

四、javascript调试的技巧

 

首先请打开“谷歌浏览器”（废话），然后打开一个网页，按“F12”会出现一个控制台，找到一个叫做“Sources”,点击它

 

OK，如果你的页面现在已经加载过JS脚本的话，那么应该可以看到一些JS文件了

 

然后你可以在左侧侧栏的序号那些位置点击一下就设置成断点，当你要执行某个函数的时候浏览器就会自动进入调试模式了

 

点击图中左上角的调试按钮，第一个是程序向前运行。 细心的你肯定会发现Scope Variables区域显示的竟然就是Object对象的元素

 

关于js调试的几个控制简介

js控制面板就是在顶部的侧面板，这几个工具条可以让你按步执行代码。

继续：继续执行代码，直到我们遇到另一个断点。

步骤：忽略方法体内部，也就是不进入到方法体内部细节再执行，只调用取返回值继续在当前执行下步。

进入细节：细节逐语句执行，进入方法体再执行。

退出细节：细节语句返回主函数体。

断点开关：决定该断点是否开启/关闭。
 

chrome中也提供了一个格式化代码的功能。
 
一般我们打开的大部分的网站有些js文件是已经被yui\uglifyjs等js压缩工具压缩过的代码，让你看格式来进行调试十分不容易（根本就不可能）。点击（pretty print）的按钮立即将当前文件进行标准格式了。我啰嗦一句，这个格式化代码目前我只知道能格式化dom和js，css文件没有格式化效果当然也就不支持了。


然后点击底部鼠标的 “{}“，就会

 

五、Network标签页

Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用。注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示的。
点击左侧某一个具体请求URL，可以看到该请求的详细HTTP请求情况：包括网络请求、页面响应的各个参数，方便优化。
1行是用来选择需要查看请求响应的方式；
2行选择查看需要查看的文件类型；
3行是是显示请求响应时间；
4行是具体的各个页面请求数据。

第1行：

• group by frame: 逐帧显示
• preserve log: 保留请求日志
• disable cache:禁用缓存
• offline:离线
• online的各个选择：模拟调试3G网络测试

第4行：选择一个文件双击

• headers:请求头信息和响应头信息
• preview: 根据你所选择的资源类型（JSON、图片、文本）显示相应的预览。
  　　　　在Preview(预览功能)中，控制台会把发送过来的json数据自动转换成javascript的对象格式
• response:响应主体，页面内容
• timing:时间

 

六、Security标签页 可以告诉你这个网站的安全性，查看有效的证书等

七.Audits标签页 可以帮你分析页面性能，有助于优化前端页面，分析后得到的报告

八.Post man你值得拥有的网络请求神器

在我们的开发过程中，后端的接口都是由发起AJAX请求而获取到的相关数据，但是很多情况是我们的业务还没有做到那块时，后端的同学接口都已经准备好了，但是为了便于后期的工作，将接口请求的数据模拟访问，然后对接口联调很重要，也很方便，因为我们不可能把每个请求代码都写到文件里编译好了再去浏览器内查看，这时候可以安装一个post man网络请求插件，在谷歌应用商店下载，需要

该扩展程序使用非常简单，功能同时也非常强大，输入你的请求，选择好请求的method，需要请求参数的挨个填好，send之后，就可以看到返回的数据，这个小工具很利于我们的开发