如何利用Chrome工具进行前端js调试

这次，我所要与你们分享的是利用Chrome工具进行前端js调试，也就是咱们在程序中所说的debug（这个方法是我一个朋友和我分享的，我拿来跟你们一块儿分享）。

1. 必备工具：Chrome浏览器， js开发环境。
2. 在Chrome浏览器中运行你的web工程，打开“开发者模式”（右键选择检查或者按“F12“”）。打开你的sources选项，找到你所要调试的js文件。

    

3. 在你想要调试的地方单击插入断点，成功以后你们也会发现有一个像路标同样的在所在的行上，这样就是显示插入成功了，另外在右边你也能够看见“Breakpoints”选项下也能看见断点的具体信息，在多少行插入的都有显示的，注意：对勾表明不忽略断点，若是对勾去掉，则断点不起做用。

    

4. 当你进行调试的时候，会出现这样的页面。表面你插入的断点已经起到了做用。我就来说讲页面上显示的两个按钮的做用。左边的按钮表明释放断点，若是释放以后，表示这次调试结束。右边的按钮，表明从你当前插入断点的地方，继续往下执行，你点击一下，程序便向下执行一行，直至程序结束就会中止。并且执行的时候，你可以看见js中的变量值以及值的改变状况，进而能够判断程序在哪里执行出现了问题，最终解决问题。

    

    

    

    

5. 最后在出现调试的页面状况下，右边也有不少选项。这里我就不一一说了，但愿你们去探索，总的有些须要本身去寻找，这样才能获得更多。 

         切记：若是没有出现调试程序，说明你的操做没有进入你所插入的断点。