Chrome 插件、快捷键、 高级调试指南、JavaScript 调试_sleazyfork

支持插件的安卓手机浏览器：(有的支持 "资源嗅探器")

• X 浏览器：https://www.xbext.com/
• Via 浏览器：https://viayoo.com/zh-cn/
• 狐猴浏览器：https://lemurbrowser.com/new_version_test/app/zh.html
• 嗅觉浏览器电脑版：https://blog.csdn.net/zuiruanku/article/details/136504919
  嗅觉浏览器：https://ran-ran.top/531.html
  下载：https://ran-ran.top/wp-content/themes/begin/download.php?id=NTMx
  软件汇总：https://haikuoshijie.cn/categories/hikerView/
• 海阔视界：https://yinghe.app/site/haikuoshijie/
  海阔视界纯新人上手使用指南（保姆级）：https://www.bilibili.com/video/BV1YN411Q7Ho/
• Kiwi 浏览器：https://kiwibrowsercn.github.io/
• 雨见浏览器：https://yjllq.com/
• 夸克浏览器：https://www.quark.cn/

猫抓：https://github.com/xifangczy/cat-catch

1、chrome 简介

希腊文 Chromium 的本意是 "颜色"。1797年，法国化学家 L.N.Vauquelin 在西伯利亚红铅矿中发现一种新矿物，命名为 Chromium，中文的意思是铬，铬的化合物都有颜色。

铬是一种质地极其坚硬的银白色金属。2006年，谷歌把一款全新的浏览器命名为 Chromium ，并向全世界开放了源代码。现在 Chromium 成为世界上许多浏览器的坚强核心，占据了70%以上的电脑屏幕。

Chrome ≠ Chromium

Chromium 是 Google 为发展自己的浏览器Google Chrome 而开启的计划，Chromium 所使用的 Webkit 内核，是目前公认的最快的网页浏览方式。作为开源项目， Chromium 的更新速度很快，常常是每隔数小时就会有新的开发版本发布。但这并不是成熟的浏览器产品，而是某种初始状态的、供研究和二次开发的基础浏览器。

Chrome 是谷歌公司的产品， Chromium 则是谷歌主导的开源项目。无论是谷歌 Chrome 浏览器，微软Edge 浏览器、俄罗斯 Yandex 浏览器，还是国产360极速浏览器、QQ浏览器、搜狗高速浏览器、百度浏览器，UC浏览器电脑版 等，都是以 Chromium 为内核的浏览器，都是一棵树上生长出来的不同枝叶。

• chromium 是 Google 的一个开源项目，图标是 蓝色。
      最新版本：https://chromium.en.softonic.com/
      github：https://github.com/chromium/chromium
      解决 Chromium “缺少 Google API 密钥”问题：https://blog.csdn.net/yori_chen/article/details/79654294
• chrome 是基于 chromium 的一个浏览器，图标是 红黄绿 。
      地址：https://www.google.cn/chrome/

从最初的 Chromium 开始，谷歌 Chrome 浏览器要形成发布的用户产品，通常要经过四个版本：

• ① Chrome canary：第一级测试，为 Chromium 使用彩色图标，加入自动更新的版本，版本号更新的速度和 Chromium 一样，但发布总是比 Chromium 晚两天。
• ② Chrome dev ：第二级测试，有安装程序，比 Chromium 和 canary 稳定，有一个安装程序。
• ③ Chrome beta：第三级测试，比dev稳定。
• ④ Chrome stable：即谷歌浏览器官网下载的用户版本。

上面的过程或步骤并非谷歌 Chrome 浏览器独有，其他以 Chromium 为内核的浏览器研发过程也大致如此，甚至有过之而无不及。

下载 安装 chrome

官方在线安装版：https://www.google.cn/intl/zh-CN/chrome/

官方离线安装版：https://dl.google.com/tag/s/appguid%3D%7B8A69D345-D564-463C-AFF1-A69D9E530F96%7D%26iid%3D%7B77CCCA8B-F59C-E570-E701-E2575690F29C%7D%26lang%3Dzh-CN%26browser%3D3%26usagestats%3D0%26appname%3DGoogle%2520Chrome%26needsadmin%3Dprefers%26ap%3Dx64-stable-statsdef_1%26installdataindex%3Dempty/chrome/install/ChromeStandaloneSetup64.exe

下载参数解释
我们在正常的下载页面后面添加了一些参数 ?standalone=1&platform=win64
其中 ?standalone=1 指离线安装包
 platform=win64 指64位Windows版本。
如果只加 ?standalone=1 则会下载32位的Chrome离线包
用 mac 替换 win ，就可以下载 Mac版本

第三方下载地址

异次元软件世界提供的地址：https://www.iplaysoft.com/tools/chrome
浏览迷提供的地址：https://liulanmi.com/chrome
追梦人博客提供的地址：https://dream.ren/tool/chrome

手机版

豌豆荚 下载：https://www.wandoujia.com/apps/280309

IOS 下载：https://apps.apple.com/cn/app/google-chrome/id535886823

汇总第三方Chrome插件下载市场

：https://zhuanlan.zhihu.com/p/76634823

：https://zhuanlan.zhihu.com/p/497391881

安装 Chrome 插件

谷歌官网下载的原始的谷歌浏览器就像一个白板，大部分的功能都需要借助浏览器扩展插件才能实现。以 Chromium 为内核的浏览器，最大的特色就是可以安装丰富的Chrome扩展，能否下载安装丰富的扩展以获得完整的 Chrome 体验，就成为 Chrome 用户的首要问题。

• 方法 1：直接通过 chrome 插件商店安装，google 插件商店因为 "墙" 的原因无法访问，如果会 "高科技" 上网可以忽略。直接通过插件商店安装
• 方法 2：如果不会 "高科技" 上网，就只能曲线下载：通过 Edge下载插件，找到 Edge 插件位置，然后开启 Chrome 开发者模式，加载Edge 的插件。Edge 插件默认位置在：C:\Users\你的用户名\AppData\Local\Microsoft\Edge\User Data\Default\Extensions
•  方法 3：​Chrome 插件商店 --- 镜像 插件 商店

  ​        Crx 搜索：https://www.crxsoso.com/
          Cxrdl：https://crxdl.com/
          极简插件：https://chrome.zzzmh.cn/
          扩展迷：https://www.extfans.com/

• 方法 4：下载插件，手动从本地导入：
          1. 下载插件后，把后缀为 .crx 的插件改为 .rar，然后解压缩到一个文件夹
          2. 进入chrome://extensions/ 这个页面，右上角，开启开发者模式
          3. 点击"加载已解压的扩展程序"，选择第一步中解压的文件夹 即可。

奶酪工具箱：https://www.runningcheese.com/

让搜索 词条/链接 点击后变色

点击后变色

搜索词条/链接点击后变色：https://jingyan.baidu.com/article/e5c39bf5f4e8d439d760339e.html
让浏览器里点击过的链接变颜色：https://www.zhihu.com/question/347567195/answer/1981520543

Stylish、xStyle、Stylebot 插件

 ：https://stylebot.dev/help/

 打开已安装样式

右键点击 Stylish 扩展程序图标，再点击下拉菜单中的 "选项"，进入已经安装样式。

​

编写新样式

点击 "编写新样式"，点击上图中的 "编写新样式"，会弹出编写样式的编辑框，编写样式

A:visited {
 
color:#b6b6b6 ! important;
 
}
 
A:visited em {
 
color:#b6b6b6 ! important;
 
}

再按下图操作，增加如下链接样式，应用对象可以不用输入或是匹配网址前缀：https://www.baidu.com 。

​

测试样式是否生效

刷新页面，就可以看到搜索结果中访问的链接/词条的颜色已经变成了灰色，Stylish扩展程序图标上会显示出一个数字，表示有样式已经匹配到了当前的网站。

​

对比效果明显。。。

油猴、暴力猴

油猴号称最强的浏览器插件，用 Chrome 的人都需要知道的超强神器。可以在指定 url 内，执行指定的 JavaScript 脚本（指定的URL到了后，会自动触发执行指定的JavaScript ）。

所以借由各位大神的脚本，我们能实现更多更强大的功能，例如：

• 直接下载百度网盘文件(不限速)
• 百度网盘直接填写密码
• 播放 vip 视频
• 将网站默认的「二维码登录去除」
• 还原清新的小说阅读模式
• 豆瓣和 IMDb 互相显示评分
• ......

你看到的这些仅仅是油猴插件的一小部分，还有其他的可以在会使用后自行下载。

油猴安装好后，是没有脚本的，需要进入 用户脚本 下载所需的脚本。

如果要找更多的其他 chrome 扩展插件，推荐：https://chrome.zzzmh.cn/

脚本搜索关键字：vip 视频 百度 baidu m3u8 广告 等，每个关键字都单独搜索，肯定有你想要的脚本，然后点击进入，安装 即可。

Sleazy Fork：https://sleazyfork.org/zh-CN/scripts

翻译 插件

沉浸式翻译：https://immersivetranslate.com/

DeepL翻译：阅读写作翻译器：

其他插件

​

2、chrome 快捷键

Chrome DevTools 快捷键 列表：https://www.w3cschool.cn/chromedevtools/awij1hjn.html
Chrome 浏览器 for mac 实用快捷键大全：https://www.jb51.net/softjc/603407.html
Chrome "装逼" 必会：http://www.360doc.com/content/17/1218/11/31784658_714160454.shtml

执行命令前确保环境变量 Path 有 chrome路径

Chrome 浏览器 命令行 启动参数：https://www.cnblogs.com/videring/articles/7243958.html
命令行启动 chrome 并进入指定的 URL：chrome.exe --new-window www.taobao.com --disable-infobars

​

Chrome 天天都在用，但是基本都是用鼠标操作，最近感觉有些操作用鼠标非常不方便，所以就找了下它的快捷键，这些都是在官方文档上面找到的，因为看官方文档是需要翻墙的，大部分时候不太方便，所以就把它记录下来，下次有需要的时候好查。

​

1. 标签页、窗口 快捷键

2. 功能快捷键

3. 地址栏快捷键

在地址栏中可使用以下快捷键：

4. 网页快捷键

5.  鼠标快捷键

以下快捷键要求您使用鼠标：

以上就是 Chrome 中的所有快捷键，但其实有很多都是不怎么用的，只需要记住几个平时经常用的就行了。

6. 其他 快捷键

这里有一些其他的 Chrome 快捷键，这些都浏览器通用的快捷键，并不是 DevTools 内的特有的。查看适用于Windows，Mac 和 Linux的Chrome 的所有快捷键。

下面是一些浏览器中非常有用的额外的快捷方式( 附：所有Windows/Linux/Mac快捷方式)

3、开发者工具 (DevTools)

google 官方文档：https://developer.chrome.com/docs/devtools/

DevTools 快捷键

Chrome 的 DevTools 提供了一些内置的快捷键，开发者利用这些快捷键可以节省常工作中很多日的开发时间。下面列出了每个快捷键在 Windows / Linux / Mac 中的对应键。

其中一些快捷键对于 DevTools 全局可用，而另一些则只能在单个面板中使用。

查看 开发者快捷键，可以 F12 -> 设置 -> shortcuts 查看。如图：

​

​

DevTools 相关功能

​

​

打开 DevTools

front-end-study：https://github.com/CompileYouth/front-end-study

认识 Chrome DevTools

[认识 Chrome DevTools](./tool/devtools/Chrome DevTools Overview.md)

• Chrome DevTools - Elements
• Chrome DevTools - Console
• Chrome DevTools - Sources
• Chrome DevTools - Network
• Chrome DevTools - Performance
• Chrome DevTools - Memory
• Chrome DevTools - Application
• Chrome DevTools - Security
• Chrome DevTools - Audits

Chrome extensions/apps，既然用 Chrome， 为什么不让 Chrome extensions/apps 让你的 Chrome 更加强大呢？

推荐给开发者的 Chrome extensions/apps

要访问 DevTools，在谷歌 Chrome 浏览器里的任何网页或应用程序，你可以使用这些选项之一：

• 打开 Chrome 菜单​，在浏览器窗口的右上角，然后选择工具 > 开发工具。
• 在任何页面元素右键单击并选择检查元素。

Source 面板

​ 不能暂停异常

​ 暂停所有异常（包括那些被捕获 try / catch 块内）

​ 暂停未捕获的异常（通常是你想要的那个）

network 面板

代码编辑器快捷键

TimeLine (时间轴)面板

Profiles 面板

Console(控制台)

控制台右击：

• XMLHttpRequest logging: 打开查看 XHR 日志
• Preserve log 在导航栏上
• Filter: 隐藏或显示脚本文件的消息
• Clear console: 清除控制台

截屏

Devtools 高级调试指南

Chrome Devtools 高级调试指南：https://juejin.cn/post/6844903961472974855
chrome devtools 设置黑色主题：https://blog.csdn.net/sinat_15347975/article/details/81151342
Chrome DevTools 实用技巧大全（收藏）：https://blog.csdn.net/qianyu6200430/article/details/113903914

JavaScript 调试技巧总结

浏览器 调试 JS

From：https://www.cnblogs.com/yuerdong/p/9883951.html

Chrome 是 Google 出品的一款非常优秀的浏览器，其内置了开发者工具（Windows 系统中按下 F12 即可开启），可以让我们方便地对 JavaScript 代码进行调试。

打开谷歌浏览器，然后打开调试功能栏（ 快捷键 F12 ），然后打开 Sources 面板。

​

调试的快捷键（ 鼠标可以放到按钮上，会自动显示对应快捷键 ）

• F8：暂停 / 执行 ( pause )
• F9：单步执行，( step )
• F10：单步跳过 ( step over next function call )
• F11：单步进入 ( step into )
• Shift + F11：跳出当前方法体。( step out of current function )

Step Over Next Function Call：逐语句执行
Step IntoNext Function Call：进入方法内部执行。
Step OutofCurrent Function：跳出当前方法

在调试过程中，如果想快速跳到下一个断点或者让 JavaScript 代码运行下去，可以点击 Resume
script execution 按钮

设置断点

 方法 1：在 Source 内容区设置

（1）找到要调试的文件，然后在内容源代码左侧的代码标记行处点击，即可打上一个断点。

（2）刷新浏览器，当页面代码运行到断点处便会暂停执行。

​

方法 2：在 js 文件中设置

（1）我们在 js 源文件中需要执行断点操作的代码前加上 debugger。

（2）刷新浏览器，当页面代码运行到断点处会暂停执行

​

Ajax 断点

Ajax 请求时，触发断点

设置 条件 断点

（1）右键点击设置的断点，选择 Edit breakpoint...

（2）输入执行断点的条件表达式，当表达式为 true 时断点调试才会生效。有了条件断点，我们在调试代码的时候能够更加精确地控制代码断点的时机

​

Call Stack 调用栈

1. 界面介绍

（1）当断点执行到某一程序块处停下来后，右侧调试区的 Call Stack 会显示当前断点所处的方法调用栈，从上到下由最新调用处依次往下排列。

（2）Call Stack 列表的下方是 Scope Variables 列表，可以查看此时局部变量和全局变量的值。

​

2. 使用技巧

（1）调试时当前调用在哪里，Call Stack 列表里的箭头便会指向哪里。同时当我们点击调用栈列表上的任意一处，便会调到相应的位置，方便我们再回头去看看代码。

（2）如果想重新从某个调用方法处执行，可以右键选择 Restart Frame。断点就会跳到此处开头重新执行，同时 Scope 中的变量值也会依据代码重新更改，这样就可以方便地回退来重新调试，省得我们再重新刷新整个页面。

​

DOM 断点

1，DOM Breakpoints 介绍

除了可以给 js 代码设置断点，我们还可以给 DOM 元素设置断点。因为我们有时候需要监听和查看某个元素的变化、赋值情况，但是并是不太关心哪一段代码对它做的修改，只想看看它的变化情况，那么可以给它来个监听事件。

2，使用说明

（1）我们右键点击需要监听的 DOM 节点，选择“Break On...”菜单项，在出现的三个选择项中任选一个便会添加断点。

​

（2）这三个选择项分别对应如下三种修改情况：

• suntree modifications：子节点修改
• attribute modifications：自身属性修改
• node removal：自身节点被删除

（3）设置好断点后，当 DOM 元素要被修改时，代码就会在自动停留在修改处。

​

管理 所有 断点

我们可能会在不同的文件、不同的位置添加许多断点。这些都会显示在 Source 页面里的 Breakpoints、DOM Breakpoints 区域中：

• Breakpoints：js 断点
• DOM Breakpoints：DOM 元素断点

点击断点前面的复选框可以暂时“去掉/加上”该断点，点击断点可跳转到相应的程序代码处

​

改写 JavaScript 文件

一个网页里面的 JavaScript 是从对应服务器上下载下来并在浏览器执行的。有时候我们可能想要在调试的过程中对JavaScript做一些更改，比如说有以下需求：

• 发现 JavaScript 文件中包含很多阻挠调试的代码或者无效代码、干扰代码，想要将其删除。
• 调试到某处，想要加一行 console.log 输出一些内容，以便观察某个变量或方法在页面加载过程中的调用情况。在某些情况下，这种方法比打断点调试更方便。
• 调试过程遇到某个局部变量或方法，想要把它赋值给 window 对象以便全局可以访问或调用。
• 在调试的时候，得到的某个变量中可能包含一些关键的结果，想要加一些逻辑将这些结果转发到对应的目标服务器。

这时候我们可以试着在 Sources 面板中对JavaScript 进行更改，但这种更改并不能长久生效旦刷新页面，更改就全都没有了。

有什么方法可以修改呢?

• 其实有一些浏览器插件可以实现，比如 ReRes。在插件中，我们可以添加自定义的 JavaScript 文件，并配置 URL 映射规则，这样浏览器在加载某个在线 JavaScript 文件的时候就可以将内容替换成自定义的 JavaScript 文件了。另外，还有一些代理服务器也可以实现，比如 Charles、Fiddler 等，借助它们可以在加载 JavaScript 文件时修改对应 URL的响应内容，以实现对JavaScript 文件的修改。
• 其实浏览器的开发者工具已经原生支持这个功能了，即览器的 Overrides 功能它在 Sources 面板左侧

快速定位文件 ( ctrl + p )

全局搜索 ( ctrl + shift + f )

js 代码格式化

为了减小体积，有时候我们发现一些 js 源码都是压缩之后的代码，我们可以点击下面的 {} 大括号按钮将代码转成可读格式。

​

格式化返回的 JSON 数据

 （1）有时我们调试程序时需要查看服务端返回的数据内容，这个在 Network 选项卡中就可看到。但如果后台返回的是没有格式化的 JSON 数据，查看起来会异常痛苦

​

（2）我们可以通过 chrome 控制台的 copy 接口来实现 JSON 数据的格式化。

（3）首先请求项的右键菜单中选择 Copy Response 拷贝响应内容。

​

（4）命令行中先输入 copy()，然后将拷贝的数据粘贴到括号中

​

（5）回车后 copy 接口便会自动将数据进行格式化，并保存到剪贴板中。我们将其粘贴到文本编辑器中就可以看到效果：

​

使用 Snippets 编写代码片段

 1，Snippets 介绍

（1）在 Souces 页面下的 Snippets 栏目中，我们可以随时进行 JS 代码的编写，运行结果会打印到控制台。

（2）代码是全局保存的，我们在任何页面，包括新建标签页，都可以查看或运行这些代码。我们不再需要为了运行一小段 JS 代码而新建一个 HTML 页面。

（3）Snippets 的方便之处在于，我们只需要打开 Chrome 就可以编写一份任意页面都可以运行的JS代码

2，使用样例

（1）点击“New Snippet”按钮，创建一个新的片段文件

​

（2）在代码区域输入 js 代码

​

（3）按下“Ctrl + Enter”或者点击右下方的按钮执行代码，可以看到代码执行成功且反应到当前页面上了。

​

Async 调试

Chrome 调试器的 Async 模式是为调试异步函数所设计一个功能

1，测试代码

下面是一段使用 Promise 的代码：

//做饭
function cook(){
    console.log('开始做饭。');
    var p = new Promise(function(resolve, reject){  //做一些异步操作
        setTimeout(function(){
            console.log('做饭完毕！');
            resolve('鸡蛋炒饭');
        }, 1000);
    });
    return p;
}
 
//吃饭
function eat(data){
    console.log('开始吃饭：' + data);
    var p = new Promise(function(resolve, reject){ //做一些异步操作
        setTimeout(function(){
            console.log('吃饭完毕!');
            resolve('用过的碗和筷子');
        }, 2000);
    });
    return p;
}
 
cook()
.then(eat)
.then(function(data){
    console.log(data);
});

2，代码调试

（1）我们都知道 Promise 的回调是异步执行的，默认情况下调用栈只记录到回调函数本身，我们无法找到代码执行的顺序，这给我们调试带来巨大的困难。

​

（2）开启 Async 模式后，异步函数之前的调用栈都会被记录下来，而且调用栈中代码执行状态也得到了保留。

​

chrome 开发者技巧

原文：http://tutorialzine.com/2015/03/15-must-know-chrome-devtools-tips-tricks

快速切换文件

如果你使用过 sublime text，那么你可能不习惯没有 Go to anything 这个功能的覆盖。你会很高兴听到 chrome 开发者功能也有这个功能，当 DevTools 被打开的时候，按 Ctrl+P（cmd+p on mac），就能快速搜寻和打开你项目的文件。

​

在源代码中搜索

如果你希望在源代码中搜索要怎么办呢？在页面已经加载的文件中搜寻一个特定的字符串，快捷键是 Ctrl + Shift + F (Cmd + Opt + F)，这种搜寻方式还支持正则表达式

快速跳转到指定行

在 Sources 标签中打开一个文件之后，在 Windows 和 Linux中，按 Ctrl + G，(or Cmd + L for Mac)，然后输入行号，DevTools就会允许你跳转到文件中的任意一行。

另外一种方式是按 Ctrl + O，输入: 和 行数，而不用去寻找一个文件。

控制台选择元素

更多控制台命令：https://developer.chrome.com/devtools/docs/commandline-api

DevTools 控制台支持一些 变量 和 函数 来选择 DOM元素：

• $()–document.querySelector()的简写，返回第一个和css选择器匹配的元素。例如$(‘div’)返回这个页面中第一个div元素
• $$()–document.querySelectorAll()的简写，返回一个和css选择器匹配的元素数组。
• $0-$4–依次返回五个最近你在元素面板选择过的DOM元素的历史记录，$0是最新的记录，以此类推。

​

使用多个插入符进行选择

当编辑一个文件的时候，你可以按住 Ctrl（cmd for mac），在你要编辑的地方点击鼠标，可以设置多个插入符，这样可以一次在多个地方编辑。

​

Preserver log

勾选在 Console 标签下的 保存记录(Preserver log) 选项，可以使 DevTools 的 console 继续保存记录而不会在每个页面加载之后清除记录。当你想要研究在页面还没加载完之前出现的 bug 时，这会是一个很方便的方法。

​

格式化 源码

Chrome’s Developer Tools 有内建的美化代码，可以返回一段最小化且格式易读的代码。Pretty Print 的按钮在 Sources 标签的左下角。

​

设备 模拟

对于开发移动友好页面，DevTools 包含了一个非常强大的模式，这个谷歌视频介绍了其主要特点，如调整屏幕大小、触摸仿真和模拟糟糕的网络连接

​

设备传感仿真

设备模式的另一个很酷的功能是模拟移动设备的传感器，例如触摸屏幕和加速计。你甚至可以恶搞你的地理位置。这个功能位于元素标签的底部，点击 “show drawer” 按钮，就可看见 Emulation 标签 --> Sensors.

​

颜色 选择器

当在样式编辑中选择了一个颜色属性时，你可以点击颜色预览，就会弹出一个颜色选择器。当选择器开启时，如果你停留在页面，鼠标指针会变成一个放大镜，让你去选择像素精度的颜色。

​

强制改变元素状态

DevTools 有一个可以模拟 CSS 状态的功能，例如元素的 hover 和 focus，可以很容易的改变元素样式。在 CSS 编辑器中可以利用这个功能

​

可视化的 DOM 阴影

Web 浏览器在构建如 文本框、按钮 和 输入框 一类元素时，其它基本元素的视图是隐藏的。不过，你可以在 Settings -> General 中切换成 Show user agent shadow DOM，这样就会在元素标签页中显示被隐藏的代码。甚至还能单独设计他们的样式，这给你了很大的控制权。

​

选择下一个匹配项

当在 Sources 标签下编辑文件时，按下 Ctrl + D (Cmd + D) ，当前选中的单词的下一个匹配也会被选中，有利于你同时对它们进行编辑。

​

改变颜色格式

在颜色预览功能使用快捷键 Shift + Click，可以在 rgba、hsl 和 hexadecimal 来回切换颜色的格式

​

通过 workspaces 来编辑本地 文件

Workspaces 是 Chrome DevTools 的一个强大功能，这使 DevTools 变成了一个真正的 IDE。Workspaces 会将 Sources 选项卡中的文件和本地项目中的文件进行匹配，所以你可以直接编辑和保存，而不必复制/粘贴外部改变的文件到编辑器。

为了配置 Workspaces，只需打开 Sources 选项，然后右击左边面板的任何一个地方，选择 Add Folder To Worskpace，或者只是把你的整个工程文件夹拖放入 Developer Tool。现在，无论在哪一个文件夹，被选中的文件夹，包括其子目录和所有文件都可以被编辑。为了让 Workspaces 更高效，你可以将页面中用到的文件映射到相应的文件夹，允许在线编辑和简单的保存。　

Workspaces：https://developer.chrome.com/devtools/docs/workspaces

web 安全 小技巧

前端冷知识集锦，很多都是web安全能用到的小技巧

 前端已经被玩儿坏了！像 console.log()可以向控制台输出图片 等炫酷的玩意已经不是什么新闻了，像用||操作符给变量赋默认值也是人尽皆知的旧闻了，今天看到Quora上一个帖子，瞬间又GET了好多前端技能，一些属于技巧，一些则是闻所未闻的冷知识，一时间还消化不过来。现分类整理出来分享给大家，也补充了一些平时的积累和扩展了一些内容。

地址栏 运行 JavaScript

​这个很多人应该还是知道的，在浏览器地址栏可以直接运行JavaScript代码，做法是以javascript:开头后跟要执行的语句。比如：javascript:alert('hello from address bar :)');

需要注意的是如果是通过copy paste代码到浏览器地址栏的话，IE及Chrome会自动去掉代码开头的javascript:，所以需要手动添加起来才能正确执行，而Firefox中虽然不会自动去掉，但它根本就不支持在地址栏运行JS代码

博文《让Chrome 接管邮件连接，收发邮件更方便了》中有使用到，利用在浏览器地址栏中执行JavaScript代码将Gmail设置为系统的邮件接管程序。

地址栏 运行 HTML

如果说上面那条小秘密知道的人还算多的话，这条秘笈知道的人就要少一些了，在非IE内核的浏览器地址栏可以直接运行HTML代码！

比如在地址栏输入以下代码然后回车运行，会出现指定的页面内容。

data:text/html,<h1>Hello, world!</h1>

浏览器 当 编辑器

还是浏览器地址栏上做文章，将以下代码贴到地址栏运行后浏览器变成了一个原始而简单的编辑器，与Windows自带的notepad一样，吼吼。

data:text/html, <html contenteditable>

归根结底多亏了 HTML5 中新加的 contenteditable 属性，当元素指定了该属性后，元素的内容成为可编辑状态。

推而广之，将以下代码放到console执行后，整个页面将变得可编辑，随意践踏吧~

document.body.contentEditable='true';

利用 a 标签 自动解析 URL

很多时候需要从一个URL中提取域名，查询关键字，变量参数值等，而万万没想到可以让浏览器方便地帮我们完成这一任务而不用我们写正则去抓取。方法就在JS代码里先创建一个a标签然后将需要解析的URL赋值给a的href属性，然后就得到了一切我们想要的了。

var a = document.createElement('a');
a.href = 'http://www.cnblogs.com/wayou/p/';
console.log(a.host);

利用这一原理，稍微扩展一下，就得到了一个更加健壮的解析URL各部分的通用方法了。下面代码来自James的博客。

function parseURL(url) {
    var a =  document.createElement('a');
    a.href = url;
    return {
        source: url,
        protocol: a.protocol.replace(':',''),
        host: a.hostname,
        port: a.port,
        query: a.search,
        params: (function(){
            var ret = {},
                seg = a.search.replace(/^\?/,'').split('&'),
                len = seg.length, i = 0, s;
            for (;i<len;i++) {
                if (!seg[i]) { continue; }
                s = seg[i].split('=');
                ret[s[0]] = s[1];
            }
            return ret;
        })(),
        file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],
        hash: a.hash.replace('#',''),
        path: a.pathname.replace(/^([^\/])/,'/$1'),
        relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],
        segments: a.pathname.replace(/^\//,'').split('/')
    };
}

页面拥有ID的元素会创建全局变量

在一张 HTML 页面中，所有设置了ID属性的元素会在JavaScript的执行环境中创建对应的全局变量，这意味着document.getElementById像人的阑尾一样显得多余了。但实际项目中最好老老实实该怎么写就怎么写，毕竟常规代码出乱子的机会要小得多。

<div id="sample"></div>
<script type="text/javascript">
        console.log(sample);
</script>

加载CDN文件时，可以省掉HTTP标识

现在很流行的CDN即从专门的服务器加载一些通用的JS和CSS文件，出于安全考虑有的CDN服务器使用HTTPS方式连接，而有的是传统的HTTP，其实我们在使用时可以忽略掉这个，将它从URL中省去。

<script src="//domain.com/path/to/script.js"></script>

这一点在之前一篇译文博客《jQuery编程最佳实践》中也有提到。

利用 script 标签保存任意信息

将script标签设置为type='text'然后可以在里面保存任意信息，之后可以在JavaScript代码中很方便地获取。

<script type="text" id="template">
    <h1>This won't display</h1>
</script>

var text = document.getElementById('template').innerHTML

关于CSS的恶作剧

相信你看完以下代码后能够预料到会出现什么效果。

*{
    cursor: none!important;
}

简单的文字模糊效果

以下两行简单的CSS3代码可达到将文字模糊化处理的目的，出来的效果有点像使用PS的滤镜，so cool!

p {
    color: transparent;
    text-shadow: #111 0 0 5px;
}

垂直居中

有好多次博主都有这样的需求，垂直居中显示某个DIV，我们知道CSS中天然有水平居中的样式text-align:center。唯独这个垂直居中无解。

当然你可以将容器设置为display:table，然后将子元素也就是要垂直居中显示的元素设置为display:table-cell，然后加上vertical-align:middle来实现，但此种实现往往会因为display：table而破坏整体布局，那还不如直接用table标签了呢。

下面这个样式利用了translate来巧妙实现了垂直居中样式，需IE9+。

.center-vertical {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

相比而言，水平居中要简单得多，像上面提到的text-align:center，经常用到的技巧还有margin:0 auto。但对于margin大法也只在子元素宽度小于容器宽度时管用，当子元素宽度大于容器宽度时此法失效。

如法炮制，利用left和transform同样可实现水平居中，不过意义不大，毕竟text-align和margin差不多满足需求了。

.center-horizontal {
    position: relative;
    left: 50%;
    transform: translateX(-50%); 
}

多重边框

利用重复指定box-shadow来达到多个边框的效果

在线演示

/*CSS Border with Box-Shadow Example*/
div {
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
    height: 200px;
    margin: 50px auto;
    width: 400px
}

实时编辑 CSS

通过设置style标签的display:block样式可以让页面的style标签显示出来，并且加上contentEditable属性后可以让样式成为可编辑状态，更改后的样式效果也是实时更新呈现的。此技巧在IE下无效。拥有此技能者，逆天也！

<!DOCTYPE html>
<html>
    <body>
        <style style="display:block" contentEditable>
            body { color: blue }
        </style>
    </body>
</html>

创建长宽比固定的元素

通过设置父级窗口的padding-bottom可以达到让容器保持一定的长度比的目的，这在响应式页面设计中比较有用，能够保持元素不变形。

<div style="width: 100%; position: relative; padding-bottom: 20%;">
    <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;background-color:yellow;">
        this content will have a constant aspect ratio that varies based on the width.
    </div>
</div>

CSS中也可以做简单运算

通过CSS中的calc方法可以进行一些简单的运算，从而达到动态指定元素样式的目的。

.container{
    background-position: calc(100% - 50px) calc(100% - 20px);
}

生成随机字符串

利用Math.random和toString生成随机字符串，来自前一阵子看到的一篇博文。这里的技巧是利用了toString方法可以接收一个基数作为参数的原理，这个基数从2到36封顶。如果不指定，默认基数是10进制。略屌！

function generateRandomAlphaNum(len) {
    var rdmString = "";
    for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
    return rdmString.substr(0, len);
}

整数的操作

JavaScript中是没有整型概念的，但利用好位操作符可以轻松处理，同时获得效率上的提升。

|0和~~是很好的一个例子，使用这两者可以将浮点转成整型且效率方面要比同类的parseInt,Math.round 要快。在处理像素及动画位移等效果的时候会很有用。性能比较见此。

var foo = (12.4 / 4.13) | 0;//结果为3
var bar = ~~(12.4 / 4.13);//结果为3

顺便说句，!!将一个值方便快速转化为布尔值 !!window===true 。

重写原生浏览器方法以实现新功能

下载的代码通过重写浏览器的alert让它可以记录弹窗的次数。

(function() {
    var oldAlert = window.alert,
        count = 0;
    window.alert = function(a) {
        count++;
        oldAlert(a + "\n You've called alert " + count + " times now. Stop, it's evil!");
    };
})();
alert("Hello World");

关于console 的恶作剧

关于重写原生方法，这里有个恶作剧大家可以拿去寻开心。Chrome的console.log是支持对文字添加样式的，甚至log图片都可以。于是可以重写掉默认的log方法，把将要log的文字应用到CSS的模糊效果，这样当有人试图调用console.log()的时候，出来的是模糊不清的文字。好冷，我表示没有笑。

是从这篇G+帖子的评论里看到的。使用之后的效果是再次调用log会输出字迹模糊不清的文字。

var _log = console.log;
console.log = function() {
  _log.call(console, '%c' + [].slice.call(arguments).join(' '), 'color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5);');
};

不声明第三个变量的值交换

我们都知道交换两个变量值的常规做法，那就是声明一个中间变量来暂存。但鲜有人去挑战不声明中间变量的情况，下面的代码给出了这种实现。蛮有创意 的。

var a=1,b=2;a=[b,b=a][0];

万物皆对象

在JavaScript的世界，万物皆对象。除了null和undefined，其他基本类型数字，字符串和布尔值都有对应有包装对象。对象的一个特征是你可以在它身上直接调用方法。对于数字基本类型，当试图在其身上调用toString方法会失败，但用括号括起来后再调用就不会失败了，内部实现是用相应的包装对象将基本类型转为对象。所以(1).toString()相当于new Number(1).toString()。因此，你的确可以把基本类型数字，字符串，布尔等当对象使用的，只是注意语法要得体。

同时我们注意到，JavaScript中数字是不分浮点和整形的，所有数字其实均是浮点类型，只是把小数点省略了而以，比如你看到的1可以写成1.，这也就是为什么当你试图1.toString()时会报错，所以正确的写法应该是这样：1..toString()，或者如上面所述加上括号，这里括号的作用是纠正JS解析器，不要把1后面的点当成小数点。内部实现如上面所述，是将1.用包装对象转成对象再调用方法。

If 语句的变形

当你需要写一个if语句的时候，不妨尝试另一种更简便的方法，用JavaScript中的逻辑操作符来代替。

var day=(new Date).getDay()===0;
//传统if语句
if (day) {
	alert('Today is Sunday!');
};
//运用逻辑与代替if
day&&alert('Today is Sunday!');

比如上面的代码，首先得到今天的日期，如果是星期天，则弹窗，否则什么也不做。我们知道逻辑操作存在短路的情况，对于逻辑与表达式，只有两者都真才结果才为真，如果前面的day变量被判断为假了，那么对于整个与表达式来说结果就是假，所以就不会继续去执行后面的alert了，如果前面day为真，则还要继续执行后面的代码来确定整个表达式的真假。利用这点达到了if的效果。

对于传统的if语句，如果执行体代码超过了1 条语句，则需要加花括号，而利用逗号表达式，可以执行任意条代码而不用加花括号。

if(conditoin) alert(1),alert(2),console.log(3);

上面if语句中，如果条件成立则执行三个操作，但我们不需要用花括号将这三句代码括起来。当然，这是不推荐的，这里是冷知识课堂:)

禁止别人以 iframe 加载你的页面

下面的代码已经不言自明了，没什么好多说的。

if (window.location != window.parent.location) window.parent.location = window.location;

console.table

Chrome专属，IE绕道的console方法。可以将JavaScript关联数组以表格形式输出到浏览器console，效果很惊赞，界面很美观。

//采购情况
var data = [{'品名': '杜雷斯', '数量': 4}, {'品名': '冈本', '数量': 3}];
console.table(data);

4、Chrome 隐藏 功能

Chrome 作为主力浏览器，支持相当丰富的第三方扩展，其实浏览器本身也内置了大量实用的命令。

下面整理的 Chrome 命令，将会让用户实现快速查询信息的目的，比如：查询浏览器的用户配置文件存储位置、实验阶段的功能选项，甚至是集中显示浏览器支持的所有的命令的详细列表。

chrome://version

显示当前版本。浏览器地址栏输入并打开   chrome://version，页面显示了当前浏览器版本的详细信息，比如：本地操作系统类型，JavaScript、Flash 软件的具体版本和文件存放位置。

​

这一页面中有两处实用的信息：命令行 和 个人资料路径

• 命令行。引号部分为 Chrome 本地安装的目标位置，引号后面的内容则显示用户在功能特性界面自定义修改过的内容。
• 个人资料路径，这个文件路径就是大家经常说的用户配置文件。Default 文件夹就是默认的 Chrome 配置文件夹，如果用户创建了多个 Chrome 用户，会有以 Profile N （N 代表从 1 开始的数字）为方式命名的文件夹。在重装电脑之前将个人资料路径的文件拷贝一份，下次重装电脑间接实现快速备份 Chrome 浏览器的个人配置信息。

chrome://flags

实验项目。输入   chrome://flags 这个命令将打开 Chrome 浏览器的功能特性界面，我们可用来启用或者关闭某些 Chrome 的实验功能。flags 页面按照 Available、Unavailable 两种标签页显示项目，如果用户明确知道需要查找的实验项目，可以使用顶部的搜索栏，或者在地址栏直接输入   chrome://flags/# ( 项目名称 ) ，比如我要查找 overlay-scrollbars 项，那么只需要输入   chrome://flags/#overlay-scrollbars  ，即可直接定位到目标选项。

​

经过粗略统计，flags 实验项目拥有近 200 多项，里面包括了对滚动条、Omnibar 地址栏、书签管理器样式、导入 / 导出保存的密码信息等内容，大部分选项提供了 Disable 禁止、Enable 开启或者 Default 默认三种状态。

chrome://settings

设置页面。输入   chrome://settings   将快速打开 Chrome 浏览器的设置页面，页面的内容分类划分为基础和高级设置选项，基础项细分为其他人、外观、搜索引擎、默认浏览器、启动时，高级项有隐私设置和安全性、密码和表单、语言、下载内容、打印、无障碍、系统、重置并清理，最后一个就是「关于 Chrome」的选项。

​

每个细分选项通过类似   chrome://settings/xx   命令来快速定位，下面是对应命令：

​

chrome://extensions

Chrome 设置页面的命令扩展程序页面。输入   chrome://extensions，这个命令方便取代以往进入两三级菜单才能打开浏览器已安装的扩展程序页面（需打开「菜单 - 更多工具 - 扩展程序」），扩展页面的常规功能包括了打开 / 关闭开发者模式、手动加载 / 更新扩展、搜索安装的扩展程序、手动关闭 / 打开 / 删除某个扩展。另外，页面侧边栏还隐藏了键盘快捷键的页面，用户同样可在地址栏输入   chrome://extensions/shortcuts   快速打开，集中管理用户为每个扩展设置的键盘快捷键组合，以及设置是否在全局或者只在 Chrome 本身激活快捷键。

​

chrome://net-internals

显示网络事件信息。输入   chrome://net-internals   后打开一个显示网络相关信息的页面，这个命令主要用来捕获浏览器生成的网络事件，默认会显示当前连接的网络服务事件，可导出数据、查看 DNS 主机解析缓存。

​

chrome://components

查看组件信息。输入   chrome://components，这个命令显示 Chrome 浏览器所有用到的组件，在这里可以查看常用的 Flash 组件的版本，并检查是否有更新。

​

chrome://translate-internals

查看哪些网页被禁止翻译

输入   chrome://translate-internals，打开浏览器内置翻译功能的页面，显示了页面是什么语言的情况下不提示翻译、哪些页面不再提示翻译、以及哪些语言组合是提示翻译，用户还可以手动关闭哪些以前设置过的翻译选项。

​

chrome://quit 、chrome://restart

退出和重启浏览器。注意，首先这个不要着急输入这两条命令   chrome://quit、chrome://restart，它们分别可以实现退出和重启浏览器，其中重启命令间接实现了一键重启浏览器的目的。

chrome://about

查看所有的命令列表。用户如果还对如何找到这些浏览器命令感到困惑的话，输入   chrome://about   命令，将集中列出 Chrome 浏览器支持的所有的命令，分为了 Chrome URLs 以及 Debug 用途的命令。

​

其他常用的 Chrome 命令还包括了：

• chrome://downloads： 直接访问 Chrome 浏览器网页下载的文件。
• chrome://history： 直接访问 Chrome 浏览器访问的历史记录。
• chrome://apps： 访问 Chrome 浏览器中安装的应用的界面，可以对应用进行删除管理。
• chrome://bookmarks： 直接访问 Chrome 浏览器中我们收藏的标签。
• chrome://dns： 显示浏览器预抓取的主机名列表，让用户随时了解 DNS 状态。
• chrome://devices： 查看连接电脑的设备，比如传统打印机中，可设置添加打印机到 Google 云打印的入口。

另类的命令扩展：Steward

Steward  号称是 Chrome 浏览器里类  Alfred  启动器，用户可以使用   off |all（禁用所有扩展）、on 扩展名称（启用某个扩展）、bk 网址名称（屏蔽某个网站）、todo 内容（建立代办事项）等快捷命令来快速实现某些功能，甚至利用扩展内置的 workflow 设置来创建属于自己的工作流。在这里简要介绍 Steward 内置的 chrome 命令，在调用扩展的搜索栏输入   chrome，Steward 将会自动显示目前支持的命令，用户无需记住完整的浏览器命令。

​

Steward 支持打开 Chrome 命令