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 来打开，像什么都没有发生一样。

谷歌浏览器开发调试小技巧相关推荐

调试小技巧－－－利用调用堆栈
2019独角兽企业重金招聘Python工程师标准>>> 调试小技巧---利用调用堆栈如图:在解决bug的时候,不能确定下一步程序执行到哪,可以利用Xcode中的调用堆栈来快速查 ...
delphi开发的小技巧----------------http://www.cto360.com/a/5000086716.shtml
delphi开发的小技巧----------------http://www.cto360.com/a/5000086716.shtml http://www.cto360.com/a/5000086 ...
调试笔记--keil 断点调试小技巧
调试笔记–keil 断点调试小技巧给变量打断点调试不熟悉的项目时,卧槽!怎么这么多全局变量?这玩意又在那修改了??这个时候会给变量打断点就能省好多事. 将要监视的全局变量添加到watch窗口选中 ...
日常开发CSS小技巧整理
日常开发CSS小技巧整理 1.解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移 .wrap {display: inline-block;overflow ...
微信开发调试小工具进化→微信用户发送信息模拟器发布！——这标题起真是好数码暴龙的说...
直接说正题吧.最近在做微信第三方服务器.在模拟用户发过来的请求方面,网上流传着一个"微信开发调试小工具",谁做都不知道了.反正我觉得那个东西看起来挺不爽的,因为其信息发送类型不是很 ...
遇到BUG手足无措？还不快进来学习调试小技巧！
目录一.什么是BUG? 二.调试是什么? 调试的基本步骤 Debug和Realease的介绍三.调试的具体方法调试中的快捷键查看临时变量的值调试的实例四.如何写出优秀(易于调试的代码) 常 ...
11个强大的Visual Studio调试小技巧
伯乐在线注:我们在@程序员的那些事微博上推荐了英文原文,感谢@halftone_被禁用了的热心翻译. 简介调试是软件开发周期中很重要的一部分.它具有挑战性,同时也很让人疑惑和烦恼.总的来说,对于稍 ...
我从别人那里偷学的前端调试小技巧(浏览器篇)
发现光,欣赏光,学习光每个人身上都有着不同的闪光点,把焦点凝结在缺点上只会让互相难过.转移焦点,放在他的优点上,你会发现,唔还不错.而且,你还可以学习它,让你变得更棒.(我越来越擅长写鸡汤了???? ...
[译]15个关于Chrome的开发必备小技巧
谷歌Chrome,是当前最流行且被众多web开发人员使用的浏览器.最快六周就更新发布一次以及伴随着它不断强大的开发组件,使得Chrome成为你必备的开发工具.例如,在线编辑CSS,console以及d ...

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