常用的Chrome f12 调试

  Chrome调试窗口有9个标签:

工作中常用的几个:Elements, Console, Sources, NetWork, Application

  • Elements



Elements 中,可以查看并且编辑页面元素,在左侧可以点选某一个元素,该元素会在页面上高亮,同时在右侧显示该元素的所有样式。

  • Console

Console最有用的,就是打断点的时候进行查看吧。

  • Sources

Sources标签页下,可以查看当前网站的HTML,及其引入的所有CSS、Javascript文件。重要的是,在Javascript文件中的任何一行,我们都可以设置断点,脚本将会在这一行停下来。触发断点时,我们可以查看断点所在的作用域内的所有变量的值。
右侧窗格显示了局部变量、监视变量以及调用栈。右侧窗格的上方有继续、下一步、进入函数、跳出函数、禁用断点等按钮。


  •  Network

    Network 中,可以查看当前页面的所有网络请求。

 

  • Application

目前application主要用来查看有哪些cookies和local Storage(H5本地存储Web storage特性的API), 测试的时候,有时需要清理和查看。

原文地址:https://www.cnblogs.com/guojunru/p/5440208.html