本文介绍如何利用Chrome开发者工具的高级功能，如console.table()和console.log()的改进使用方式，以及各种快捷键，来提高编码和调试效率。同时分享了如何将Chrome浏览器临时转换为文本编辑器的小技巧。
1. console
- console.table
平时我们打印数组或对象时，大多用console.log()，很少用到console.table()，其实表格的形式更直观，当列太多的时候，就可以通过第二个参数，只传入你想展示的列名，console.table(data, ['channelId', 'channelName'])。点击列名可进行排序。
2.console.log
一个简单变量，你都可能会忘记（或混淆）哪一个是那个。当你有不同的变量需要打印的时候，阅读起来会更费劲。
为了让它变得更加易读，你可以打印一个对象 - 只需将所有console.log()的参数包装在大括号中，当然我们也可以结合console.table()，使得打印内容更加易于阅读。
2. 快键键
- ctrl + shift + D (⌘ + shift + D Mac)
我通常会发现自己在 95％ 的时间内都在使用 DevTools 窗口中的一个个人最喜欢的位置（底部的 dock)，但是有时我想切换到另外一个(通常是右边的 dock)。那么你可以通过 DevTools 的下拉菜单，或者命令菜单…或者使用一个快捷键 ctrl + shift + D (⌘ + shift + D Mac)。
- ctrl + [ 和 ctrl + ]
我们经常从 “元素” 面板转到 “源” 面板并返回。 这些快捷键帮助我们在活动面板之间切换：
- 按下 ctrl + [ 和 ctrl + ] 分别从当前面板的分别向左和向右切换面板。
- 按下 ctrl + 1 到 ctrl + 9 转到编号 1…9 的面板(所以 ctrl + 1 转到元素面板，ctrl + 4 转到
网络信息面板等等)
通常这组快捷键默认是停用的。如果你想打开它，到 DevTools Settings>>Preferences>>Appearance然后打开这个选项：
3. 把Chrome浏览器变成文本编辑器
- 在浏览器地址栏中输入一行代码：
data:text/html, <html contenteditable>，回车即可把浏览器变临时编辑器。 - F12打开当前网页的控制台后，在控制台输入：
document.body.contentEditable=true，即可编辑当前网页。
扫一扫
4333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
