说到js调试，相信大家都不陌生哈，最常见的两种方式：

①利用alert（）来打印想要的结果。

② 利用 console.log() 方法在JavaScript 控制台上输出内容。

这两种方法基本解决了一些小型的javascript的调试问题。现在随着chrome浏览器的强大功能，浏览器里也可以调试js

第一步，打开chrome浏览器，选择这三个点的图标，选择下图所示的更多工具-开发者工具（或者选择快捷方式 ctrl+shift+I）

第二步，打开需要调试的页面，例如以下网址

①左侧是内容源，包括页面中的各种资源 。其中，又分 Sources 和 Content scripts。

 Sources 就是页面本身包含的各种资源，它是按照页面中出现的域来组织的，另外，异步加载的 js 文件，在加载后也会出现在这里的。

Content scripts 是 Chrome 的一种扩展程序，它是按照扩展的ID来组织的，这类扩展实际也是嵌入在页面中的资源，它们也可以读写DOM。编写、调试这类扩展的开发者才要关心它们，如果你的浏览器没安装任何扩展，那么 Content scripts 就看不到任何东西。

②中间主区域用于展示左边资源文件的内容（在这个区域可以设置断点--单击就ok）

③右边是调试功能区（最上面的一排按钮分别是暂停/继续、单步执行、单步跳入、单步跳出、禁用/启用所有断点------快捷键F11是进入下一步，shift+F11跳出进入下一步，F8跳到下一个断点）

如下图所示

④可以点击audits 改进你的网站（这个刚刚尝试了一下感觉有点慢，没等结果出来）

YSlow是一个非常棒的工具。谷歌浏览器的开发者工具里也有一个非常类似的工具，叫Audits。

它可快速的审计你的网站，给你提出非常实际有效的优化你的网站的建议和方法。

⑤移动设备模拟环境（还没测试）

谷歌浏览器里有一些非常有趣的模拟移动设备的工具，帮助我们调试程序在移动设备里的运行情况。

找到它的方法是：按F12，调出开发者工具，然后按ESC键(当前tab不能是Console)，你就会看到第二层调试窗口出现，里面的Emulation标签页里有各种模拟设备可选。

当然，这不会就变成了真正的iPhone，只是模拟了iPhone的尺寸，触摸事件和浏览器User Agent值。