Chrome调试面板详情


前言

刚刚入门爬虫,记录一些自己的思路,以便日后参考,再者就是有幸能给诸君一点点帮助
所用网站链接链接: 百度翻译.


关于Chrome调试面板的一些详情

常用面板

在这里插入图片描述

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

Network面板

在这里插入图片描述

  1. all:所有的请求
  2. XHR(XmlHttpRequest对象js生成): js动态加载请求
  3. JS: JS代码
  4. Css: 样式
  5. image: 图片
  6. Media: 音频,视频
  7. Font: 字体
  8. DOC: 首页
  9. WS: WebSocket

设置断点

点括弧之后
在这里插入图片描述
在这里插入图片描述

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

逐步调试

在这里插入图片描述

作用域

当脚本中断的时候,Scope(作用域)窗格将显示当前时刻所有当前定义的属性。

在这里插入图片描述

调用堆栈

在这里插入图片描述

  • 靠近边栏顶部的是Call Stack(调用堆栈)窗格。当代码在断点处暂停时,CallStack(调用堆栈)窗格显示执行路径,按时间逆序,将代码带到该断点。这有助于理解现在执行到哪里,它是如何到达这里的,是调试的一个重要因素。
  • 调用函数链,下面调用上面的函数
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

苍旻之泪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值