谷歌浏览器调试工具使用简介

1. elements 元素查看

• 1. 选中某个元素 查看其样式

     
     image.png

• 2. 直接调试修改样式

     
     image.png

• 3. 选中元素右击

     
     image.png
  • 给元素添加属性 例如id class 等
  • 复制元素
  • 删除元素
  • forcestate:添加 active :hover 样式
• 4. 将元素存储为全局变量 store as global variable
  • image.png
  • 此时可以通过temp1 对元素进行访问与一些操作
• 5. styles
  • image.png
  • 可以进行样式的调试
  • 可以通过filter 直接进行类的筛选
• 6. computed 实际计算出来的样式
  • image.png
  • 有时候样式没有达到想要的效果,可以在这里查看并查找原因
• 7. event listener
  • image.png
  • 绑定的dom事件

• 8）rendering
  可以查看每次重绘的内容

  
  image.png
  image.png

2. console

• 1. 信息查看

     
     image.png
  • 可以选择对应的信息类型,进行信息的过滤
  • 主要是进行网络请求信息的查看

• 2. 打印信息选择

     
     image.png

• 3）选中元素在控制台可以通过$0直接访问该元素

  
  image.png

• 4. $_ 访问上次控制台打印的输出

     
     image.png

• 5）console.count
  通过直接调用可以查看调用次数

  
  image.png

3. network

• 1. 查看请求

     
     image.png

• 2. headers

     
     image.png
  • 可以查看请求头信息与响应头信息状态码,请求方法等
  • 当页面显示信息有误或者不能正常响应时,查看请求是否有问题

  • 当与后端进行协作时,部分时候可能需要curl给后端,后端去查找问题原因

    
    image.png

• 3. payload

     
     image.png
  • 请求参数
  • 可以通过 view source 请求代码格式

• 4. preview

     
     image.png
  • 按照对象形式进行数据的查看

• 5. response

     
     image.png
  • 相应数据的原始格式

• 6. initiator

     
     image.png
  • 请求发出所在文件
  • 在开发中,当有部分接口报错,导致页面不能正常显示,影响自己的开发的时候,可以注释掉别人的部分请求代码,继续自己的开发

• 7)Timing

  
  image.png
  • 可以查看请求返回的具体时间
  • 根据请求时间进行对应的优化
  • 可以看出大部分时间处于等待服务器响应

• 8. cookies

     
     image.png
  • 请求所携带的一些cookie信息
• 9. 网速慢速模拟

image.png

4. memory

image.png

• 查看网页内存占用

5. application

image.png

• 主要进行localStorage/sessionStorage/cookies的查看与修改
• 部分情况调试的时候可以直接删除或者修改或者添加信息
• 比如账户登录后的token存储在这里,当调试需要重新登录的时候直接删除token
  信息即可

6. sources

image.png

• 断点调试,程序查错的一大利器