chromets调试

chromets调试：首先其次最后使用chrome自带调试工具步骤：

1. 打开Chrome，打开任意一个网页，下图为新浪首页：

2. 按下F12键，能看到会d出如下图所示的对话框

3. 鼠标右键需要修改的地方，在d出的选项选择”检查“，如下图：

4. 可以看到需要改动的地方，对应区域的CSS样式都在右侧区域显示，此时在右边的代码就可以进行调试了，如下图：

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

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

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

SourcesPanel 的左边是内容源，包括页面中的各种资源。其中，又分 Sources 和 Content scripts。Sources 就是页面本身包含的各种资源，它是按照页面中出现的域来组织的，这是我们要关注的。异步加载的 js 文件，在加载后也会出现在这里的。Content scripts 是 Chrome 的一种扩展程序，它是按照扩展的ID来组织的，这类扩展实际也是嵌入在页面中的资源，它们也可以读写DOM。编写、调试这类扩展的开发者才要关心它们，如果你的浏览器没安装任何扩展，那么Content scripts 就看不到任何东西。

Sources Panel 的中间主区域用于展示左边资源文件的内容。

Sources Panel 的右边是调试功能区，最上面的一排按钮分别是暂停/继续、单步执行、单步跳入、单步跳出、禁用/启用所有断点。下面是各种具体的功能区。稍后介绍。

工具/原料

GoogleChrome浏览器

GoogleChrome开发者工具

只要安装了谷歌浏览器，就可以使用GoogleChrome开发者工具了，GoogleChrome开发者工具是内嵌到浏览器的开发工具,打开方式有两种：第一“按F12”，第二：shiftctrli

Console介绍

Console

可以查看网页运行后提示的消息，错误或者警告以及输出内容等，网页后台可以使用Console.debug("输出内容")；来在Console输出显示，可以做到调试的作用吧，不过一般真正调试不是拿Console。console.debug("Console使用介绍")console是小写形式，不然提示没有Console

Resources介绍。

Resources里可以查看web程序跑起来后所加载的一些资源（Resources），包括图片或者其他“值”，以及Cookies

Sources介绍

Sources可以查看运行的脚本，调试一般都是在Sources调试的，所以程序开发者需要了解和熟悉Sources的使用

Sources调试使用

在左侧的脚本代码编号，鼠标点击即可添加断点，添加断点后，刷新网页，程序运行到断点即可看到断点调式的状态了，具体调试需要在自己想查看某个方法里边是否有问题，一步步排除，效果很好

NetWork介绍

NetWork可以看到网页加载的脚本和资源的时间，还可以看到某些不能加载成功的资源；这里有位是百度首页演示，百度首页内容很干净所以不需要加载什么图片等资源

Elements介绍

Elements这个就比如页面的每个元素吧，比如百度搜索这个图片，可以通过Elements找到，搜索框也可以，在底下的“放大镜”类似的控件，点击然后选择自己想要查看要素或位置，Elements会跳转到相应的实现代码

---