Google Chrome调试js入门

工具/原料

• chrome浏览器、html编辑器

方法/步骤

1. 我们要调的json数据见下图，这里不涉及和后台的交互。

   

2. 我们在chrome中打开开发者工具，打开方式如下图，我们也可以使用快捷键F12来打开。选择我们要调试的文件，相信你能找到，^_^。

   

3. 设置断点的设置，我在11行设置了断点，设置方法左侧点击即可，我太喜欢这个断点了，看起来真漂亮。刷新一下页面，执行如下图：

   

4. 在向下执行之前，我们直接输入json(我们的对象名)，看看对象结构，可以非常清晰的看到json到底是个什么东西，不用太多的解释，如下图：

   

5. 按F10向下执行，我们依次输入我们的变量名，本例中3个取值方法是相同的，调试结果如下图：

   

6. 6

   如果你还在使用alert()调试js代码，赶快丢弃吧。当然了，这仅是一篇非常非常简单的入门级文章，更多的精彩还得由你去发现！Google Chrome的优点太多了，如果你还没有使用，强烈推荐你体验体验互联网老大的杰作Google Chrome！