在chorme上调试 js

1.Elements 在chorme上打开一个页面，可以在页面中的任意地方点击右键，然后点击最下面的 “检查”，可以得到下图（快捷键 F12）

默认会选择上面的Elements,Elments里主要是当前页面的html代码，用鼠标停留在某一行代码上，相应的左边的页面中对应的元素会被灰色背景显示出来，如果要用左边的页面元素去右边找相应的代码，那么就先点击这个弹出框左上角的箭头

然后就可以选择左边的元素了，选择左边，右边会相应的以灰色背景显示出对应的代码

多种方法修改HTML

要修改页面元素的HTML结构，其中一般涉及到：

• 修改HTML属性
• 修改整个HTML的代码
• 删除节点
• 移动节点的位置

对于上述几种要求，使用elements面板的时候都比较简单直接。要修改HTML属性，只需要在要修改的属性上双击，就会进入输入状态，输入你想要修改的属性；要修改整个HTML代码的时候，只需要在元素上右键-“Edit as HTML”即可；要删除节点，可以在选中元素后，按下delete快捷键，或者右键选择“Delete node”;需要移动节点的位置的时候，只需要鼠标拖动选中的元素到你想要的位置即可。

            

右键还有好几种方法，如上图。值得一提的是active/hover/focus/visited这4中状态，这些强制设置状态在某些情况下比较的有用，例如你想查看某些hover伪类的样式，又例如元素里有隐藏的元素，需要在鼠标hover的时候才出现，但你的鼠标移开的时候hover状态就消失了，强制显示hover状态比较方便你检查元素hover的情况。另外还有Break on ,设置断点在调试的过程中可以给元素添加断点。很神奇吧？现在支持的断点的状态有：元素的子节点结构改变时、元素的属性改变时、元素被删除时。在大型项目中，这一断点比较有意思。大型项目中的HTML结构都比较宏大，而且脚本在改变HTML接口的时候你又难以跟踪元素HTML的状态。使用断点，这些都不是问题。右键菜单中即可把这一功能呼唤出来。

多种方法修改CSS

elements面板的右侧即是展示所选择元素的css样式的地方。然而右侧不止是修改和展示css样式的地方。实际上，右侧包括了以下集中功能：

• 展示和修改CSS样式
• 展示实际计算结果的样式
• 显示当前元素的事件监听情况
• 显示当前元素包含的dom断点
• 显示当前元素的对象属性

这些功能都在面板右侧的tab上有显示。另外，如果你有给Chrome开发工具安装插件，那么插件的功能区也会成为一个新的tab显示在后面。例如博主我就安装了jQuery Audit和JS Runtime这两个插件。

利用elements面板修改CSS样式是很简单的事情，但里面也有一些小窍门可以分享给大家。在CSS样式的属性值上，如果是数字的属性值，则可以通过按上下方向快捷键来给属性值加一，通过按住shift键的同时按上下方向快捷键，可以给属性值递增十。

同样，在elements面板的样式区域也可以给元素强制设置状态（active/hover/focus/visited）。做法和原理跟上面说的一样。

2.Console Elements的右边就是 Console是控制台，其实除了console滑动窗，你点击任何一个滑动窗下面都会有console，console是控制台，在很多语言的调试里都会有这个，一般是设置了断点以后，可以在下面输入一些元素，然后查看元素的值或者状态等等

3.Source

不简单的sources面板

debug第一步就是打开Chrome开发工具的sources面板。。。（这么简单的道理还用你来说？！）呵呵，sources面板其实不简单。用过类似sublime text的代码编辑器都知道一些快捷键，例如ctrl+p用来打开一个文件、ctrl+shift+f用来全局搜索关键字。其实在Chrome开发工具也有类似的快捷键。

• ctrl+o 打开一个js文件
• ctrl+p 同ctrl+o
• ctrl+f 查找当前js文件中的关键字
• ctrl+shift+f 全局查找关键字
• ctrl+shift+e 在控制台运行当前选中的代码片段

值得一提的是ctrl+shift+e这个快捷键，可以立马在控制台运行当前选中的代码片段。相信做过js的debug的时候，大家都有这样的经验，想看当前代码中某句代码的执行结果，只好先选中复制这段代码，打开控制台，粘贴代码，回车运行看结果。这么长的流程，全交给ctrl+shift+e这个快捷键，赞吧！

断点

打开sources找到js文件，在行号上点一下罢了。操作起来似乎很简单,如下图 ，以present,js为例

什么时候设置断点？

设置断点是为了调试状态下运行程序，可以看到程序运行过程中的数据变化情况，检验代码是否正确，方便其分析。也可以在一次调试中设置断点，下一次只需让程序自动运行到设置断点位置，便可在上次设置断点的位置中断下来，极大的方便了操作，同时节省了时间。

如果不设置断点，通常在代码中就会用print之类的输出语句把一些变量的值输出出来，查看程序执行的状态，其实断点干的就是这事。

以这个“添加物品”的按钮为例，假如我点击了“添加物品”，却没有任何反应，那么我们就会想到这个按钮所对应的事件有没有响应，反应在代码上就是这个添加物品对应的函数有没有被调用，是否调用正确。那么我就可以在函数里面设置一个断点，如下图

设置了断点以后，当然是要去运行程序，也就是重新去点击刚才的那个“添加物品”按钮，我们点击以后并选择了一个物品，

我们可以看到左侧的页面被一个半透明的层给盖住了，页面上方还有一串英文和两个按钮，右侧代码259行被添加上了背景色，出现这个情况，先不管那些按钮英文是啥意思有啥作用，我们需要知道的是如果出现了上图这个情况，说明一点，click事件中的函数被调用了，进一步说明了点击事件生效。那么我们对于这个问题产生的第一个“犯罪嫌疑人”就被排除了。

如果没有出现上面的情况咋办？那是不是说明点击事件没有生效呢？那是什么导致点击事件没有生效？

可能导致点击事件没生效的原因很多，比多选择器错误，语法错误，被选择的元素是后生成的等。就要仔细检查一下

继续往下走，我们将目光投向事件内部，click事件触发了，那么接下来的问题可能就是它内部的函数问题了。

这个小图标的功能叫”逐语句执行“或者叫”逐步执行“，这是我个人理解的一个叫法，意思就是，每点击它一次，js语句就会往后执行一句，它还有一个快捷键，F10。

我们要查看函数执行过程中各变量的值是多少，可以从3个地方看，如下图

困惑一：在没有打断点的情况下，在console输入i，结果console报错了。

为什么不打断点我就没有办法在控制台直接输出变量的值呢？个人理解这时候i只是一个局部变量，如果不打上断点，浏览器会把所有的js全部解析完成，console并不能访问到局部变量，只能访问到全局变量，所以这时候console会报错i未定义，但是当js打上断点时，console解析到了局部变量i所在的函数内，这时候i是能够被访问的。

困惑二：为什么我直接在console里输入$(“.xxx”)能打印出东西来呢？

很简单，console本身就是一个js解析器，$(“.xxx”)就是一个js语句，所以自然console能够解析这个语句然后输出结果。

介绍完“逐语句执行”按钮和console控制台的用法，最后再介绍一个按钮，上图：

这个按钮我称呼它为“逐过程执行”按钮，和“逐语句执行”按钮不同，“逐过程执行”按钮常用在一个方法调用多个js文件时，涉及到的js代码比较长，则会使用到这个按钮。比如在我们的add_item这个函数里如果又调用到一个系统函数，则用逐步调试就会跳到系统函数很长的代码里，但这并不是我们关心的，我们只想看自己接下来写的代码有没有问题，就可以用逐过程执行，然后马上就会跳过这个系统函数但下一行。

另外还有一些用于Chrome开发者工具的插件不同于普通的Chrome应用或者插件，它是给你的Chrome DevTools扩展更多的功能，方便你查看和调试web程序。它的安装方法跟Chrome应用的安装方法是一样的，可以通过Chrome应用商店或者直接crx安装文件来安装。

这里有推荐 https://segmentfault.com/a/1190000000494090