zoukankan      html  css  js  c++  java
  • 谷歌开发者工具使用解读--新人

    谷歌开发者工具的使用解读

    1、  独立窗口

     

    2、  Elements

    查看、编辑页面上的元素,包括html和css

    实用场景1:查看推广代码

     

    实用场景2:查看元素的属性,如nofollow

     

    实用场景3:ctrl+f,在搜索框中写元素的xpath路径,如果elements元素行被选中表示路径写的正确,如下例子定位post sourcing request按钮位置:

     

    3、  Network

    分析网站的网络请求情况

     

    双击文件查看详细页具体信息(如请求的ip地址,url,方法,请求结果的状态码)

     

    实用场景:如发布RFQ页面,上传附件,一直处于缓冲状态此时可以通过network查看请求情况,如有问题可以点击initiator进入具体代码页面,对于测试可以定位文件/方法错误可以快速帮助开发解决问题

    4、  Sources

    查看运行的脚本,一般都在sources调试代码

    脚本代码编号上,鼠标点击添加断点,刷新网页,程序运行到断点可以看到调试结果

    5、  Timeline

    指JS执行时间,页面元素渲染时间,点击页面底部的record开始录制执行的内容

    6、  Profiles

    主要做性能优化,查看cpu执行时间与内存占用

    7、  Resources

    查看请求加载到的资源情况,如CSS、JS、Cookies、Session Storage

    8、  Audits

    优化前端页面,加速网页加载速度;选择条件点击run,开始分析页面得出分析结果

    9、  Console

    就是指javascript控制台

    a、主要查看报错信息

     

    点击红字报错后面的文件,定位代码

    b、API查看函数和方法

     

    c、编写脚本

     

  • 相关阅读:
    华为花了100亿,为员工造了12个欧洲小镇,幸福到爆棚
    Qt5.9 官方发布的新版本亮点的确不胜枚举(而且修复2000+ bugs)
    详尽分析世纪之战:360VS腾讯是两个阶层的抗争
    c#
    PhantomJS
    bootstrap table
    Linux 入门
    多路搜索树
    网站性能优化工具
    NetCore上传多文件
  • 原文地址:https://www.cnblogs.com/xin-haiyang/p/3963064.html
Copyright © 2011-2022 走看看