Chrome 浏览器检查功能,开发者工具,(笔记自留)

本文讲述了Vue开发者如何通过CSDN Chrome功能,包括HTML结构面板、DOM操作、Console、Sources、Network等,高效定位和分析网页元素,掌握浏览器检查功能,提升开发效率。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

学习vue的过程中,看到老师熟练地运用浏览器的检查功能,获得数据标签,我酸了,

于是紧急加补 CSDN Chrome 功能

  • element

上面是HTML结构面板。下面是操作dom样式、结构、时间的显示面。

可以定位各种元素

  • console

  • sources

  • network

永远要点到 network 后及时刷新此页面,否则不会显示内容

Contrlos:外观和功能,此模块为控制外观和功能,如停止抓包、清除记录、屏幕截图、显示全部记录、禁用缓存、离线、模拟网络环境等。

Filters:过滤器,可以从众多的请求中找出我们想要的请求,这时过滤器就很重要了。默认是 All ,其右边还有很多,比如:XHR(ajax请求)、JS、CSS等,但是每次都只能选择一个,若想选择多个按住Ctrl不放,点击鼠标左键

Overview:资源检索时间的时间线,查看资源检索的时间线,可调整起始和结束时间;

Requests Table:列出了检索的每个资源的详细信息;

Summary:检索的概要

  • performance
  • memory
  • application
  • security
  • lighthouse

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值