Chrome和IE edge中Debug模式等易被忽视但常用的功能

打开浏览器的Debug调试模式(F12键或者按ctrl+shift+i)

1.设置主题(theme)和截图(screen)

按下ctrl+shift+p键，打开命令，输入主题(英文版本输入theme）就可以改变调试模式的背景，输入截（英文版本输入screen）就可以打开截图，截图可分为全尺寸(整个页面含有滚动条)、区域（类似QQ截图),屏幕截图(当前展示的屏幕截图）以及节点截图(选中HTML中的某个元素，点击截图可截取当前节点所在的区别)

2.打开控制台(console），有时候我们需要在其他选项卡的底部打开控制台，这样方便我们修改参数，直接可以通过esc键控制显示和隐藏:

3.代码格式化及禁止缓存

有时候我们打开网站的时候其中的JS文件是压缩了的，压缩后很不好看，我们可以点击开发得模式的右下角这个符合格式化，方便我们调试:

4.在开发的时候，希望浏览器不缓存我们的JS文件，可以在【网络】(Network)选项卡中，选择禁止缓存(disable cache），网络网项卡可以过滤不同的请求

有时候我们在联调或自己测试不同参数的时候经常需要重新发送请求，点击Fetch/XHR,右键Copy请求的数据，然后在控制台修改数据后点击 Replay XHR，重新请求:

4.console:

之前经常一直只会用console.log，其实console中还有些方便的方法，如console.table，在显示json表格显示时比较清晰:

console.log(str)	控制台输出一条消息
console.error(str);	打印一条错误信息，类似的还有info、warn
console.table(data [, columns])	将数据以表格的形式显示，很实用，data为数组或对象，第二个参数（数组）可指定输出的列
console.dir(object)	树形方式打印对象，特别是DOM对象非常实用
console.assert(false, 'false')	断言输出，为false才会输出
console.trace()	输出当前位置的执行堆栈，用断点会更实用一些。
console.time(label)	计时器，可用来计算耗时（毫秒），三个函数配合使用：time(开始计时) > timeLog(计时) > timeEnd(结束)
console.clear()	清空控制台，并输出 Console was cleared。

5.控制台元素的选择:

$0可选择元素面版(elements）中当前选择的元素,$()和$$()方法可以选择当前元素，相当于document.querySelector()和document.querySelectorAll(),操作方式类似于jquery，可以用class,dom,id，属性等方式选择。

6.$_,控制台引用上一次的结果:

$_可以引用上一次执行的结果，特别是指参数比较多的情况下比较实用。

7.在元素(element）选项卡中，按住alt+单击，可以一次性展示所有的子节点

8.断点请求，有时候我们需要看下别的网站请求的url中前后的代码，不知道怎么开始，可以直接添加过滤后的断点，这个功能在分析别人网站的时候比较有用:

9.开发者模式还可以打断点，这是最基本功能，有时候我们还可以修改JS的代码，让他执行我们修改的JS代码，这个在分析其他网站的时候有用:

一、打开[Sources] -> [Overrides]，如果看不到，点右侧箭头就可以看到了

二、选择这一个文件夹用来存放覆盖代码
点击 [Select folder for overrides]，会弹出资源选择器，这里选择一个要存放覆盖代码的文件夹，如果没有合适的，可以新建一个，我这里是新建的 debug，然后选中

选中后，浏览器顶部会出现提示，选择 允许,这里就出现了刚才的文件夹

三、选择要覆盖的代码
找到要覆盖的代码，右键选择[Override content]，就跳到对应文件了

到对应代码修改，保存后刷新就可以看到修改后的结果了

也可以先执行第三步，即先找到要覆盖的代码，右键选择[Override content]，如果没有保存过文件，会提示选择文件夹，再按第二步的操作