web前端Chrome调试常见操作

引言

在web前端代码编写时,需要使用谷歌浏览器调试页面;谷歌浏览器在css和js上具有完整的提示功能,在需要查询某个属性或者函数是否能用时,可以直接在谷歌浏览器中试验。
下面总结自己工作中常用技巧。

调试工具打开
  1. 调试工具有两种方式打开:一种是鼠标右键——检查,另一种是按F12
  2. 调试工具的右上角的“三个点”样子的按钮,点击可以选择调试工具在右边或者下面或者其他方式显示
dom元素调试
  1. 在打开的调试工具中的最上面一栏,选择Element,则可以看到当前页的dom结构
  2. 在Element中,划到哪个元素就可以在页面对应位置看到相关选中效果;对应的一个操作,点击调试工具的左上角的箭头,然后在页面中点击,则可以查看页面点击元素在Element中的位置
  3. 在Element中,点击选中某个元素,直接键盘按 backspace或者delete就可以直接删除,在排除某个样式影响错误的时候,可以这样快速定位到错误
  4. 在Element中,双击标签名称,可以改变标签名;双击属性,可以选中修改属性,复制;双击内容可以修改内容;选中整个标签元素,右键——“Edit as Html”或者直接F2可以修改整句标签,包括标签名、属性、内容等,一般测试滚动样式是否正常时,直接选中
  5. 标签,复制粘贴达到迅速获得较多内容出现滚动
css样式调试
  1. 选中dom元素时,在Styles栏可以看到该元素的所有样式设置,包括继承得到的样式,覆盖和被覆盖的样式情况;在Styles栏旁边有个Computed按钮,点击可以看到该元素经过计算后,真正生效的样式列表
  2. 在Styles栏中,双击可以修改样式;点击大括号{}中最后一个样式的下面可以新添加样式;选中某个样式名字或者值,删除为空,可以删除样式
  3. 调整属性中的数字时,选中,按向上或者向下可以实现+1或-1的调整
  4. 双击选中某个属性后,回车可以切换不断向下切换选中的样式
  5. 点击颜色显示的那个标识可以打开颜色的修改设置
Console中调试
  1. Console里面可以进行编程序,提示功能十分强大,常用于测试一些拿不准的判断或者功能函数,也可以查询API
  2. 当Console里面有报错时,可以直接点击定位错误,这是自动跳转到Sources栏,这一栏可以断点调试,快捷键主要使用F8(从当前断点向下继续执行直到下一个断点)、F10(从当前中断地向下执行一步)、F11(进入某个函数中一步一步执行)。使用webpack压缩打包时,开启sourcemap可以映射到未压缩前的代码中调试。
NetWork中调试
  1. 这里在刚打开时,可能什么都没有,需要重新刷新页面,得到加载资源的顺序、体积大小和时间消耗等信息。
  2. 在上面有一栏加载资源的分类,有All,XHR、JS、CSS、Img… 。其中,常用的是XHR,因为要查看ajax请求,点击后,在Header栏可以查看此次请求的首部信息,在Response栏可以看到服务器返回信息
Application中查看保存信息

在该栏可以查看cookie、localStorage等信息

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值