1、    右键选择“审查元素”（快捷键Ctrl + Shift + I），此时进入初始界面，一般用到的是element和source这两项，element用来显示页面的所有HTML元素及他们的层级关系，source用来显示页面生成的所调用的js代码。如下图所示：

2、如果想要查看界面上某个元素在什么位置（哪个div或li等）或查看点击他是调用哪个 函数或执行什么操作，则需要先点击一下审查元素框最左侧的放大镜图标，然后点击需要查看的元素即可。如下图所示：
3、    最经常用的功能：断点调试。
如果你想看某个变量的输出值是什么你可以在source栏中找到自己的js代码，在变量定义的地方打个断点，当程序调试进入断点是将鼠标放在变量上就会显示出变量的值。同时也可在控制台将你需要看的值打印出来，如259行代码将data以图表的形式进行打印，也可以根据自己需要以不同的形式进行打印。有关控制台其他的打印形式可参考另外一篇文章（ http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html）。

调试结果控制台输出：

4、    Google支持实时调试，可在审查元素里直接添加代码进行调试查看结果。
假如我在刚才例子中的258添加一个数据如图所示： 

然后Ctrl+S保存代码，在进行调试在控制台查看data的输出就可以看到表格里已经添加了刚才的新数据了。

以上的例子是在js里添加代码，那能不能在HTML元素里添加HTML元素进行查看效果呢，答案是必须可以的，比如说我想在下面界面中的小信号下面再添加一个小信号板，则可以在element栏中先找到小信号板的HTML元素的位置，然后直接编辑，额，进入不了编辑模式，小编是在逗我么？稍安勿躁，其实HTML元素的编辑模式不想js里可以直接进入的而是点击界面的右键选择第三项Edit as HTML模式进入编辑模式的，小编也是找了很久才找的的。

进入编辑框编辑HTML元素后就可在界面上实时看到效果了，看图，快看图，嘿嘿！

5、    搜索快捷键的使用。Google调试支持平常word文档查询的搜索形式，在js代码界面按搜索快捷键（Ctrl+F）在搜索框里输入你要搜索的代码关键字按enter就可以进行查询了，搜索结果会高亮显示。
OK，有关Google调试的小技巧小编这次就分享到这里了，如果以后有其他好用的东东，小编会继续分享的哦，敬请期待吧！
捕获.PNG  (45.41 K, 下载次数:0)

(2016/3/24 14:48:03 上传)

捕获.PNG