不得不说的谷歌开发者模式：谷歌调试模式调试js代码总结

谷歌浏览器对开发者来说是一个很好的工具，确实能给开发者提供很多的方便，这是工作一年多以来，一个感触。谷歌浏览器可以在前端跟踪值传递，就像我们使用myeclipse进行debug一样，谷歌浏览器提供了强大的功能，使得开发者可以在前端跟踪值传递。

只要安装了谷歌浏览器，我们就可以使用谷歌开发者模式进行代码的调试，按F12进入开发者模式。

1，首先我们来说一下谷歌浏览器的控制台console

        进入谷歌开发者模式以后，我们点击console进入控制台，在这里，我们可以很方便的进行js代码的调试。通常情况下，我们需要在程序中使用alert来查看程序的执行结果，一旦代码量很大的话，这种调试方法就会变得低效。这时，谷歌控制台的优势就体现出来了。我们可以只运行我们需要的一行代码，然后回车，就可以执行了，是不是很方便。

        例如，我们需要知道$('#id')有没有获取到一个对象，我们只需要在控制台输入$('#id');，然后回车，就可以看到结果了。

        谷歌的开发者模式对于前端工程师来说，是一个必备的工具。即使对于像我这样的java后台开发人员来说，也是一个不错的选择，它让前端调试变得更容易了。

        当断点被触发，进入调试模式时，我们可以把当前变量或者方法复制到控制台，按下回车后，控制台就会返回对应的结果。这个功能对于开发者来说，太有用了。

2，接下来说说谷歌浏览器的断点调试模式

        谷歌的断点调试模式，对于java开发人员来说，绝对是一个福音。对于一个大型的项目，由于业务逻辑很复杂，各种表之间的关联关系也很复杂，传递到前端的值可能是一个封装了几层的map，如果不能对这些值进行跟踪，那么前端调试会变得很困难。

        那么，如何进行断点调试呢？

        首先，按F12，进入谷歌开发模式，然后在文件结构目录下，找到我们需要调试的代码，找到我们需要加断点的行，单机左侧边框，就加上断点了（注意，这里我们是单击，和myeclipse打断点是不同的）。最后刷新一下页面，就OK了。程序一旦执行到这里，就会暂停，等待我们来操作。我们可以进行以下操作：



A，按F10，进入下一行；

B，如果需要查看某个对象的值，鼠标光标移到对象上面悬浮，就可以看到值了。

C，在代码的右侧Scope variables区域，可以更具体的查看当前代码段种对象的值。



D，断点开启/关闭按钮，在代码右侧，有一个断点调试的控制区域，里面一个像铅笔一样的图标，就是断点开启/关闭按钮，我们可以通过这个按钮来关闭断点或者开启断点。这个有什么用呢，其实用处还是很多的，比如循环分页，如果我们要看bug是否出现在第二页，这时我们需要跳过第一页，此时，就可以通过这个按钮，先关闭断点，然后，等程序执行到第二页的时候，再开启断点，是不是很方便。



3，谷歌开发者模式包含哪些内容

不同版本浏览器，可能有所差别：



A，Element，这里是页面元素，以网页的形式展现代码，可以进行实时编辑，实时查看效果，而不必写到代码，保存以后刷新才能查看效果。

B，Network，顾名思义，就是查看网络请求，也就是http请求

C，Source，这里是我们的源代码，可以查看当前页面引用的所有的代码文件，我们进行断点调试，就是在这里打断点。很强大的功能。

D，Console，控制台，可以直接写代码，回车运行查看结果，很方便。

E，TimeLine，查看js脚本的执行时间。

F，Profiles，用于查看js代码执行时CPU的相关参数。

还有其他的几个功能，主要是进行性能和速度的测试，一般开发者用不上，对网页性能和加载速度要求很高的网站，非常有用。

接下来说说java程序猿经常使用的功能和技巧。

4，实时修改JavaScript代码

当我们进入source以后，对source中的js代码进行修改，这时保存（在浏览器中保存，不是在myeclipse中保存），然后当程序执行到修改处的脚本时，会直接执行最新的修改以后的脚本，这时谷歌浏览器chrome特有的功能，可以有效的提高开发效率。因为我们不用去修改myeclipse中的源代码，并且不用刷新页面，清理缓存。chrome是如何实现这种功能的呢，其实，chrome是把修改的脚本保存在了浏览器缓存中。

5，设置条件断点

使用chrome进行断点调试时，我们设置可以设置条件断点。什么是条件断点呢，就是当满足一定的条件时，才会触发该断点。

下面是谷歌浏览器的百科：

Google Chrome 是由 Goole 公司开发的一款网页浏览器，自 2008 年 9 月第一个测试版本发布以来，其市场占有率逐步上升，至 2014 年 5 月，Chrome 已超越 Firefox 成为全球市场占有率第二的浏览器。Chrome 的受欢迎程度与其优秀的性能与兼容性密不可分，并且越来越多的网络应用程序都添加了对
Chrome 的支持，也足以体现网络应用的开发人员对 Chrome 的认可与青睐，而其中最重要的原因之一，莫过于 Chrome 所提供的强大的开发者工具。Chrome 开发者工具包含诸多强大的功能模块，适应于多个不同场合的需要。本文先简单介绍 Chrome 开发者工具的各个模块及其基本功能，再着重针对网页脚本调试，阐述如何巧妙运用 Chrome 开发者工具定位与调试问题。