chrome开发者工具最常用的四个功能模块:
1:Elements:主要用来查看前面界面的html的Dom结构,和修改css的样式。css可以即时修改,即时显示。大大方便了开发者调试页面。
2:console:这个除了查看错误信息、打印调试信息(console.log())、写一些测试脚本以外,还可以当作Javascript API查看用。例如我想查看console都有哪些方法和属性,我可以直接在Console中输入"console"并执行~
3:Sources:主要用来调试js和查看源代码
4:Network:如下图
记录按钮 :处于打开状态时会在此面板进行网络连接的信息记录,关闭后则不会记录。
清除按钮 :清除当前的网络连接记录信息。(点击一下就能清空)
捕获截屏 :记录页面加载过程中一些时间点的页面渲染情况,截图根据可视窗口截取,如下图所示。
过滤器 能够自定义筛选条件,找到自己想要资源信息,如下图所示。