Chrome调试----js调试技巧

说到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值。