Web开发中的调试

Chrome

C++调试功能强大,我们在开发HTML5的时候也需要掌握一定的调试方法才可以更加从容的面对Bug。
我们这里以Chrome为例对调试方法进行说明。

  • 控制台
  • 为了让之前没有接触过Web的朋友也有所了解,我先介绍下控制台是什么,我们打开Chrome,按下F12。如下图所示:

    Elements主要展示当前页面的DOM元素组成,右侧是样式表和事件监听器。
    Network主要用来抓取HTTP数据流

    开启Record,可以抓取当前的网络流,包括网络中所有的文件流和所用的资源。

    HTTP状态码

    通过这些状态码我们可以很容易知道是服务器端的问题还是客户端的问题。
    Preview可以预览对应文件编译后的代码。

  • JS断点功能
  • Source中我们可以使用断点功能来对js进行调试


    如上图所示,这里的断点调试类似VS中的断点调试。

  • Console

  • Console中我们不仅可以测试对应的js代码,而且如果我们的代码中有错误这里也会有所提示。
    点击我们就可以找到对应的错误了。