chrome 奇技淫巧

非迟
808 阅读5分钟

声明： 本文主要用于整理浏览器的若干调试技巧，将持续更新...

控制台

console 调试大法

console.log

1. 合并打印 在代码调试阶段，我们经常会使用 console.log() 来同时打印多个数据，更多的时候我们会写出以下这种代码：

let aaa = 'aaa';
let bbb = 'bbb';
console.log('aaa: ' + aaa);
console.log('bbb: ' + bbb);

我们要输出的结果其实很简单，但是却写出了如此丑陋的代码，何不试试使用下面的这种写法：

let aaa = 'aaa';
let bbb = 'bbb';
console.log({aaa,bbb}) // {aaa: "aaa", bbb: "bbb"}

是不是一下就变得简洁明了了很多？

2. Json 字符串格式化 有的时候我们需要使用 json 作为我们程序的配置文件，我们常常是先使用 js 写出一个对象或者数组，然后使用JSON.stringify() 来输出成字符串格式，复制粘贴保存为一份 json 文件。这样做没有任何问题，但是通过这种方法得到的字符串是不会有缩进的，看起来很费劲。虽然你也可以使用各种 json 美化工具去格式化它，但其实 JSON.stringify() 本身其实就支持格式化输出，不信你看下面这段代码：

let obj = {
    a: 1,
    b: 2,
    c: {
        c1: 3,
        c2: 4
    }
}
console.log(JSON.stringify(obj, null, 4))//使用四个空格缩进

执行上面这段代码，你会看到这样的效果：

image.png 怎么样，是不是非常方便！

console.table

let obj = {aaa: "aaa", bbb: "bbb"};
console.table(obj); // 以表格形式打印

打印结果： image.png

chrome 控制台里打印大对象

我们经常使用 chrome 的控制台里使用 console.log() 打印对象信息，有时候我们需要把一个对象复制下来，而当对象嵌套比较深或者数据量比较大的时候，chrome 就会以省略号的方式缩略显示给我们看。

image.png

显然，这样的结果非常不利于我们复制结果数据，这个时候我们可以使用谷歌控制台的 copy(obj) 函数（js 不提供），当然你也可以使用 JOSN.stringify() 来输出对象的 JSON 格式。

const content = JSON.stringify(obj);
console.log(content);

开发者工具（devtools）

Sources/Snippets

在 Snippets 页面，我们可以方便的写一些 js 代码片段进行测试，点击右下方的 Ctrl+Enter 按钮即可执行上方的代码片段。使用快捷键 Ctrl + S 保存代码后点击最下方的 {} 图标还可以格式化代码，非常方便！

image.png

如果你跟我一样也是使用 gist 来管理平时常用的代码片段，那么你也可以下载一个 chrome 插件，名字也叫 Snippets，安装完之后，你将会在开发者工具中看到新增了一个叫 Snippets 的标签页，你可以绑定上你的 github 账户，在设置里面绑定上你的一个代码片段，这样左侧代码片段树中就会显示你的 gist 代码片段了，当你在这里修改后，gist 代码就会同步更新。

image.png

Sources/FileSystem

书签栏

显示常用网站

书签栏主要用于显示我们平时收藏的若干网页，当我们收藏很多网页后，顶部的书签栏就会很长放不下，这时候我们一般会选择建几个文件夹，把很多网页收进文件夹里面。但是以后再访问这些网页时，就需要先点击文件夹再访问我们想要的网页，更有甚者我们会嵌套多层文件夹来整理我们的网页链接。对于一些经常需要访问的网站，我们希望它们能够常驻在书签栏我们能直接看到的地方，方便我们查找，这时候就需要使用一个小技巧来尽量缩小网页链接的显示长度了。非常简单，我们只要在添加书签时，把名称栏清空保存即可，然后你就会惊奇地发现书签栏只显示了网站图标，而后面没有显示任何文字信息，极大地缩小了我们的单书签显示长度。因为对于一些经常访问的网站，它们的网站 logo 我们肯定很熟悉，显示网站的名称其实根本没有必要。

image.png

添加 js 脚本书签

你肯定好奇什么是 js 脚本书签？其实就是手动添加一个网页（而不是收藏一个网页），在网址栏输入一段 js 脚本，这样下次在一个网页中点击这个书签时，就会执行一段 js 代码。

image.png

就比如 github 网站因为一些不可抗因素导致的一直访问不上问题，我们可以使用代理网站来访问，如： hub.fastgit.org/ ，我们就可以添加下面一段 js 代码，作用就是从 github 跳转到对应 fastgit 代理服务器。

javascript:if(window.location.href.indexOf("chrome")==0){window.location.href = document.referrer.replace("github.com","hub.fastgit.org");} else {window.location.href = window.location.href.replace("github.com","hub.fastgit.org");}

about:blank

承接上一条，前端开发过程中经常需要使用浏览器控制台或者前面介绍到的 Sources/Snippets 工具写一些测试代码，这时候最好在一个纯净的网页环境中测试运行，而不是随便打开一个网页，直接在控制台书写代码执行，这样可能会遇到一些变量冲突问题（虽然概率很小）。

好用插件

效率工具： MarkdownLoad、新浪微博图床、chrono、OneTab、Advanced REST client、极简 JSON 格式化

更多有关 chrome 浏览器奇技淫巧的介绍，请大家持续关注 ...

avatar
文章
阅读
粉丝