谷歌浏览器开发调试小技巧

1、在控制台获取上次操作返回的值

在控制台可以通过 $_ 获取上次执行返回的值,通过这个方法调试代码会方便很多

2、在控制台打印当前选中的dom元素

鼠标点中需要打印的dom元素,在控制台输入 $0  即可打印出选中元素

3、编辑页面上的文本

控制台输入 document.body.contentEditable="true"或者document.designMode = 'on' 使页面内容可编辑,一般在调试文本长度判断页面布局是否串行很实用

4、console.table()打印数据

以表格的形式打印数据,这将看起来更清晰

5、newWork 重新发起XHR请求

平时工作在和后端联调中,我们使用最多的就是netWork来查看数据查看请求的状态等,如果我们想要重新发起一个请求,往往都是刷新页面或者重新点击按钮,如果页面加载很慢比较容易影响我们的开发效率,这个时候我们可以通过浏览器的自带功能Replay XHR重新发起一次请求。

6、通过控制台发送请求

在调试接口的时候我们往往需要输入不同的参数来重新发起请求,这个时候可以在控台修改参数发送请求来达到目的

1、打开network,选中接口

2、copy -  copy as fetch

3、粘贴到控制台,根据需求修改参数

4、回车发送

7、控制台编辑脚本换行

我们往往需要通过控制台来调试代码,当输入很长时为了美观、方便我们往往需要换行,可以通过shift+enter来实现

8、命令Command菜单

“命令” 菜单是比较常用的一个功能,快速打开的方法是 Cmd + Shift + P ,比如输入switch to dark theme 来切换主题等

9、Cmd+Shift+T 打开最近关闭的页面

当我们误操作关闭某个页面的时候,快捷键 Cmd+Shift+T 来打开,像什么都没有发生一样。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值