谷歌浏览器调试工具

一.总录

1. 箭头：用来选择所需要的HTML元素，通过HTML元素定位到Elements中的对应代码。
2. 切换：用来在手机模式和电脑模式之间做切换的。
3. Elements：主要用来查看最终渲染情况，CSS样式的修改和绑定事件的定位。
   • left：结构面板。显示的是渲染出来页面的最终代码，包括JS渲染在内。
   • style：添加修改样式和类。模拟元素的hover等属性的操作。
   • computed：模型最后的计算情况与应用到的样式，在上面可以很容易直观修改盒子模型的参数。
   • events：获取选择元素的对应绑定事件的执行为之和触发的事件情况。
   • dom：断点审查情况,这个属性不常用。
   • properties：对应选中的元素调用到JS底层的对象情况，这个属性基本没有使用。
4. Console调试台：主要是用来打印输出内容，获取报错信息，页面调试内容（仅用于对在window对象中存在的对象或者变量，函数才可以使用）。
   • 打印输出内容
   • 获取报错信息
   • 页面调试内容

     //利用console中删除在百度推广广告
     //删除iframe广告内容
     var iframecount=document.getElementsByTagName("iframe").length;
     for(var i=iframecount;i>=0;i--){
         var do1=document.getElementsByTagName("iframe")[i];
         if(do1 == null){
         }else{
             //do1.style.display="none";
             do1.parentNode.removeChild(do1);
         }
     }
     //删除内嵌的广告占位，有的用上面的去除iframe后还有占位，需要再执行下
     var inscount=document.getElementsByTagName("ins").length;
     for(var i=inscount;i>=0;i--){
         var do1=document.getElementsByTagName("ins")[i];
         if(do1 == null){
         }else{
             //do1.style.display="none";
             do1.parentNode.removeChild(do1);
         }
     }

5. Source源码界面：里面呈现的代码都是原文件的代码，主要的用途是用来对代码进行断点调试和代码测试。
   • 主要的作用就是用来选择查看文件和添加一些测试脚本功能。
   • 相当于是一个视图的功能，用来审查代码用的。
   • 用来打印和跟踪元素。
6. netWork：主要是查看网络环境包括报头和返回数据等参数。
   • 请求的展示快照
   • 过滤请求的类型
   • 查看各个请求的发送时间，完成时间的一个总的概况，主要是用来全局分析用的
   • 各个请求的详情
7. Performance：主要是用来查看JS计算性能相关的，一般如果是单纯的页面不包含canvas，大数据渲染等等的，一般是不需要使用到的。
   • 性能分析火焰图
8. Memory：记录内存的情况。
   • 内存堆栈快照：查看当前的各项资源的占用情况与内存的一个比例
   • 动态监控从start启动之后内存的一个占用情况
   • 通过一个时间轴图来动态监控占用情况
9. Application：记录本地存储的相关信息（cookie,sessionStorage,LocalStorage等）的存储信息。
   • 查看存储的内容的，里面比较常用的localStorage，sessionStorage
10. security：页面安全方面的信息。
    • 判断当前页面中是否使用了有效的HTTPS证书。
11. audits：FQ，具体是用来做手机web app优化的。直接在浏览器地址栏输入chrome://inspect进入远程调试模式