chrome浏览器调试

Chrome浏览器的调试方法

首先在Chrome浏览器中按F12，就可以打开调试窗口
如下：

1.Elements：显示的是当前网页的html代码
在该页面下还可以看到元素的值，属性等等，并且可以直接在左边窗口修改元素的样式，可以直接调试样式，当然也可以看到跳转的链接地址等信息。

2.Console：控制台，会显示一些错误信息
3.Sources：当前页面所包含的文件
可以看到当前页面使用到的css文件，图片，js文件以及html等，可以通过这个查看后台修改的代码是否同步到web容器中了

4.Network：查看浏览器与后台交互的信息

Chrome浏览器在调试代码的时候存在的一些便捷的工具和快捷键等能够使得我们更加便利方便的调试。

一.快速查询文件

在页面中按ctrl+P，就可以快速搜寻和打开自己项目中的文件。

二.搜索代码

按住Ctrl+Shift+F，可以输入特定代码在源代码中寻找中其所存在的位置。

三.跳转到指定行

在source页面中打开一个文件后，按Ctrl+G，输入行号后就可以跳转到该行。

Sources页面调试

从左到右表示
1.停止断点调试
2.不跳入函数中，继续执行下一行代码（F10）
3.跳入函数中去（F11）
4.从执行的函数中跳出去
5.执行下一行代码
6.禁用所有的断点，不调试
7.程序运行遇到异常时是否要中断的开关

在页面的左侧可以看到调试的信息的，和断点。