Chrome F12调试

Chrome调试面板

1. 常用面板

• 展示

  

  • 定位小箭头按钮(左边第一个):
    • 选中Elements面板, 并启动该按钮, 可以在页面中定位相应元素的源代码位置, 或者选择源代码位置可定位到页面相应的元素。
  • 手机-PC视图切换按钮(左边第二个):
    • 启动该按钮, 网页可以在pc网址网页和手机网址网页之间进行转换。支持IPad、IPad Pro IPhone 8P、IPhone XS等。
  • Elements面板(元素面板):
    • 该面板显示了渲染完毕后的全部HTML源代码, 在使用selenium爬取网页时可通过这些源代码找到各标签的位置, 属性等特征。
    • 更重要的是, 双击html源码或者右侧的css, 可以更改网页外观, 即可以对静态网页进行调试。
  • Console面板(控制台面板):
    • 该面板用来显示网页加载过程中的日志信息, 包括打印, 警告, 错误及其他可显示的信息等。同时它也是一个js交互控制台。
  • Sources面板(源代码面板):
    • 该面板以站点为分组, 存放着请求下来的所有资源(html,css,jpg,gif,js等)。
    • 正是因为该面板存放了所有的资源, 因此在调试js时, 目标代码都是在此处寻找的。
    • 该面板也提供了调试按钮工具。
  • Network面板(网络面板):
    • Network面板记录了网络请求的详细信息, 包括请求头, 响应头, 表单数据, 参数信息等。

---

2. Network面板(爬虫中过滤请求及过滤数据类型必用——比如过滤掉异步加载出来的请求！)
   • Hide data URLs: 可以过滤掉data的响应
   • ALL: 所有的请求
   • XHR(异步请求): js动态加载请求
   • JS: JS代码
   • Css: 样式
   • Image: 图片
   • Media: 音频,视频
   • Font: 字体
   • DOC: 首页
   • WS: WebSocket
   • 注意:
     • 左上角的Preserve log选项, 如果勾选, 即代表不清除上一个页面请求的数据。会显示出两次接口调用！
     • 左上角的Disable cache选项, 表示清除缓存, 一般都要勾选, 防止网页操作时由于本地缓存的存在, 而导致一些预期之外的错误！
     • 左上角的方框Filter。
       • set-cookie-domain:baidu.com可以过滤域名为baidu.com的响应, 便于你找cookie。
       • set-cookie-name:cookie中的键。也可以过滤含有此键的响应, 便于你找cookie。
       • set-cookie-value:cookie中的值。也可以过滤含有此值的响应, 便于你找cookie。
       • cookie-name:cookie中的键。可以过滤包含有此cookie的键的请求。

---

3. 设置断点(SIT、UAT、实盘、生产环境 ----》调试使用！)

• 第一部分: 如何使用！
  • 目的: 通过调试找到目标数据生成的地方（调试必用！）
  • 使用断点来暂停JavaScript代码, 审查变量的值和在特定时刻所调用的堆栈。
  • 设置断点的最基本的方法是在特定的代码行上手动添加一个断点。也可以将这些断点配置为仅在满足特定条件时触发。
  • 在源代码的左侧, 您可以看到行号。这个区域称为line number gutter(行号槽)。单击行号槽中的行号, 就会在该行代码上添加一个断点。
  • 例如事件, DOM更改。
• 第二部分: 逐步调试！

  

  • 第三部分: 作用域！

    

    • 当脚本中断的时候, Scope(作用域)窗格将显示当前时刻所有当前定义的属性。
    • 第四部分: 调用堆栈！

      

      • 靠近边栏顶部的是Call Stack(调用堆栈)窗格。当代码在断点处暂停时,CallStack(调用堆栈)窗格显示执行路径, 按时间逆序, 将代码带到该断点。
      • 这有助于理解现在执行到哪里, 它是如何到达这里的, 是调试的一个重要因素。
      • 调用函数链, 下面调用上面的函数。

---

Chrome快捷键大全

1. 如图

---

In The End

1. 以上的知识点大多是些简单的操作命令, 典型的那种看了就忘型的内容。所以汲取一些编程界大牛的意见: 看了就忘, 忘了就看, 用了不记得——继续看！！！

2. 转载出处：https://blog.csdn.net/qq_44907926/article/details/118314228 文章出自：孤寒rm-rf*的博客