# 谷歌浏览器

身为前端开发者，你不能不知道的 Runtime Performance Debug 技巧

# 关于新版谷歌浏览器禁止http网站使用媒体设备

1、地址栏输入edge://flags/或者chrome://flags/
2、搜索unsafe
3、启用Insecure origins treated as secure，并录入需启用的网站地址

Treat given (insecure) origins as secure origins. Multiple origins can be supplied as a comma-separated list. Origins must have their protocol specified e.g. "http://example.com". For the definition of secure contexts, see https://w3c.github.io/webappsec-secure-contexts/

将给定的（不安全的）起源视为安全的起源。`多个来源可以逗号分隔的列表形式提供`。来源必须指定其协议，例如“ http://example.com”。有关安全上下文的定义，请参见https://w3c.github.io/webappsec-secure-contexts/

1
2
3

# 将收藏夹导出为json

适合谷歌和edge浏览器，即一切以谷歌内核的浏览都适用

// 获取所有的收藏夹信息
(await chrome.bookmarks.getTree())[0];

(await chrome.bookmarks.getTree())[0].children;
// 转为json字符串
JSON.stringify((await chrome.bookmarks.getTree())[0].children[0]);

1
2
3
4
5
6

# 解决Chrome浏览器调试的手机模式没有鼠标的问题

back

1、在桌面右击鼠标，进入显卡设置，如果没有的话就直接去控制面板找咯：
2、点击进入显示器配置
3、点击进入一般设置，然后找到量化范围，一般是默认范围，但是我们需要选择全范围，到这里，问题已经搞定咯。

我的电脑上的显卡驱动上找不到"量化范围" 选项，应该是驱动更新了。在英特尔官网找了了这篇文档，了解到最新驱动设置全范围的方法：
打开英特尔®图形控制面板
单击 "视频"。
单击 "颜色增强"。
在 "输入范围" 下，单击 "使用驱动程序设置"。
选择全范围。
单击 "应用"。

# 插件

back

Adblock Plus
uBlock Origin
Print Friendly & PDF
Tampermonkey
uTorrent easy client
谷歌访问助手
Emoji Keyboard by JoyPixels™
Office Online
react dev tools(facebook)
Redux DevTools
Vue.js devtools
[ChromeCleaner]

# 其他力推插件

🔝back

Screen Shader | Smart Screen Tinting
把网页调成暖色，你的眼睛会感谢你pray
Dark Reader
为任意网站启用夜间模式。
FireShot
一键滚动截屏整个网页。

# GitHub树形显示代码Octotree

back、plugin

# GitHub代码阅读插件OctoLinker

提高 Code Review/阅读代码体验，让你像使用 IDE 一样的实现类名点击跳转。
当我们把鼠标移动到类名上就会出现跳转提示，点击跳转即可完成跳转。

沙拉查词：chrome 中最好的一款翻译插件
Full Page Screen Capture (全网页截屏)
广告终结者：可以有效拦截我们常访问的网站, AD BLOCK PLUS 在部分国内常用网站上拦截无效
Infinity 新标签页
Momentum：替换 chrome 原有首页的插件, 简介大气, 左上角可以搜索, 右上角展示天气, 中间展示时间, 下方默认有个 todo 的功能, 左下角可以对标签页进行设置, 新增一些功能
crxMouse Chrome™ 手势：增强了鼠标的功能
Window Resizer：如果开发时, 用的是大显示屏, 那么你可能不能很好地兼容小屏幕笔记本
Vue.js devtools
SwitchyOmega一款浏览器代理工具, 可以让浏览器的请求代理都指向代理服务, 比如将所有请求指向 whistle, 将 *.oa.com 的服务指向内网, 将你需要的请求指向科学上网的代理服务, 让你轻松应对复杂的网络环境.
SimpleExtManager (插件管理)：这是一款可以管理插件的插件, 让你方便地禁用, 启用和删除插件, 当插件多起来的时候, 会影响 chrome 的速度, 为了在需要某个插件时, 能快速的启动某个插件, SimpleExtManager 就必不可少了

# 自选基金助手，实时查看您关注的基金funds

back

# 开发者控制台

back

选取DOM元素
将你的浏览器变成编辑器
查找DOM中元素关联的事件
监控事件
查询代码块执行时间
将变量里的值排列成表格
检查DOM中的元素
列举元素的属性
检索最近一个结果的值
清空控制台和内存

# 选取DOM元素

如果你对 jQuery 很熟悉，你应该知道 $(‘.class’) 和 $(‘#id’) 选择器的重要性。他们通过元素关联的 class 或 id 来选取元素。

但当你在 DOM 中无法使用 jQuery 时，你依然可以在开发者控制台中做同样的事情。

$(‘tagName’) 、$(‘.class’) 、$(‘#id’) 和 $(‘.class #id’) 相当于 document.querySelector(‘ ‘)。它返回选择器在 DOM 中匹配到的第一个元素。

你可以使用 $$(‘tagName’) 或 $$(‘.class’)构建特殊的选择器来选取 DOM 中所有匹配的元素（注意是两个 $ 符号）。这会把结果放入一个数组。你可以继续通过下标在数组中获取到特定的某个元素。

举个例子，$$(‘.className’) 将给你返回所有 class 为 className 的元素，$$(‘.className’)[0] 和 $$(‘.className’)[1] 分别给你返回第一个和第二个元素。

# 将你的浏览器变成编辑器

back

曾经多次幻想是否在浏览器里面就可以编辑文本？答案是可以的，你可以把你的浏览器变成编辑器。你可以在 DOM 中任意添加或移除文本。
你不再需要检查元素和编辑 HTML。相反，打开开发者控制台输入下面内容：

document.body.contentEditable=true

这将使内容变为可编辑状态。你可以编辑 DOM 里的任何东西。

# 查找DOM中元素关联的事件

back

当调试时，你肯定对 DOM 中约束元素的事件监听器感兴趣。开发者控制台让你更容易找到它们。
你可以做以下事情来找到特定事件的监听器：

getEventListeners($(‘selector’)).eventName[0].listener

这将展示与特定事件相关联的监听器。eventName[0] 是一个包含所有特定事件的数组。比如：

getEventListeners($(‘firstName’)).click[0].listener

它会展示 ID 为「firstName」元素的点击事件所关联的监听器。

# 监控事件

back

如果你想在 DOM 中特定元素绑定的事件执行时监控它们，你可以通过控制台中完成。你可以使用很多不同的命令来监控部分或全部事件：

monitorEvents($(‘selector’)) 能够监控你所选取元素所关联的所有事件，当事件触发时，在控制台打印它们。比如 monitorEvents($(‘#firstName’)) 会打印 ID 为「firstName」的元素绑定的所有事件。
monitorEvents($(‘selector’),’eventName’) 将打印元素绑定的特定事件。你可以将事件名字作为参数传入函数。它将打印特定元素绑定的特定事件。比如，monitorEvents($(‘#firstName’),’click’) 会打印 ID 为「firstName」的元素绑定的点击事件。
monitorEvents($(‘selector’),[‘eventName1′,’eventName3’,…]) 会根据你的要求打印多个事件。传递参数包含所有事件的字符串数组，而不是单个事件名字。比如，monitorEvents($(‘#firstName’),[‘click’,’focus’]) 会打印 ID 为「firstName」的元素绑定的点击事件和焦点事件。
unmonitorEvents($(‘selector’)) ：这个会停止监视和在控制台打印事件。

# 查询代码块执行时间

back

JavaScript 控制台有一个名为 console.time(‘labelName’) 的重要函数，它接收一个标记名作为参数，然后开启计时器。另一个重要函数是 console.timeEnd(‘labelName’) ，它也接收一个标记名作为参数，然后结束特定标记名所关联的计时器。举个例子：

console.time('myTime'); //Starts the timer with label - myTime
console.timeEnd('myTime'); //Ends the timer with Label - myTime
//Output: myTime:123.00 ms

1
2
3

上面两行代码给我们展示了计时器开始和结束的间隔时间。
我们可以改进它来计算代码块的执行时间。
举个例子，如果我想知道一个循环的执行时间。我可以这样做：

console.time('myTime'); //Starts the timer with label - myTime
for(var i=0; i < 100000; i++){
  2+4+5;
}
console.timeEnd('mytime'); //Ends the timer with Label - myTime
//Output - myTime:12345.00 ms

1
2
3
4
5
6

# 将变量里的值排列成表格

back

比如我们有一个下面这样的对象数组：

var myArray=[{a:1,b:2,c:3},{a:1,b:2,c:3,d:4},{k:11,f:22},{a:1,b:2,c:3}]

当我们在控制台输入变量名时，它给我们返回的格式是对象数组。这很有用。你可以展开对象查看属性值。
但当属性增加时，这变得难于理解。因此，要想清楚地表现变量，我们可以把它展示成表格。

console.table(variableName) 把变量和它的所有属性展现城表格结构。如下所示：

# 检查DOM中的元素

你可以直接在控制台中检查元素：

inspect($(‘selector’)) 会检查与选择器匹配的元素，并切换 Chrome 开发者工具到元素标签页。
举个例子，inspect($(‘#firstName’)) 检查 ID 为「firstName」的元素，inspect($(‘a’)[3]) 检查 DOM 中第 4 个锚点元素。

$0、$1、$2 等等能帮助你取到最近检查的元素。比如，$0 给你返回上次检查的 DOM 元素，$1 返回上上次检查的 DOM 元素。

# 列举元素的属性

back

你可以在控制台中做以下事情来列举一个元素的所有属性。
dir($(‘selector’)) 返回一个对象和与其 DOM 元素关联的所有属性。你可以展开它查看细节。

# 检索最近一个结果的值

你可以把控制台当做计算器。一旦你这么做，你可能需要在计算中使用上一次的计算结果。下面是如何从内存中取到上一次计算的结果。

$_ 就像下面这样：

2+3+4
9 //- The Answer of the SUM is 9

1
2

$_ 9 // Gives the last Result
$_ * $_ 81 // As the last Result was 9
Math.sqrt($_) 9 // As the last Result was 81
$_ 9 // As the Last Result is 9

# 清空控制台和内存

如果你想清空控制台和内存，只需要输入：

clear()

然后敲回车键。就是酱紫。

# 源代码快速定位到某一行

back

ctrl + p后输入:34，即可快速定位到34行

# 你还一层层展开dom

Alt + Click即可展开所以有标签

# 在Elements面板调整dom结构很不方便

放到console中去

# 11+ chrome高级调试技巧

# 控制台引用上一次执行的结果

使用$_引用上一次操作的结果，不用每次都复制一遍

// 第1步
'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
// 第2步
$_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// 第3步
$_.join('') // hsiftaf

1
2
3
4
5
6

# `$`和`$$`选择器

在控制台使用document.querySelector和document.querySelectorAll选择当前页面的元素是最常见的需求了，不过着实有点太长了，咱们可以使用$和$$替代。

# `$i`直接在控制台安装npm包

安装Console Importer插件
$i('name')安装npm包

# chrome开发者工具各种技巧

back

曾经，在线调伪类样式困扰过你
源代码快速定位到某一行
你是不是经常想不起来，在哪绑定事件的
F12后source中轻松搜索文件：Ctrl+P
source中文件定位到行：Ctrl+G
美化js等文件

# 在线调伪类

back

# 你是不是经常想不起来在哪绑定事件的

# 联调接口失败时，后台老哥总管你要response

NetWork选中请求，右键copy response

# 美化js等文件

back

# 一键开启Chrome自带多线程下载功能，让速度飞起来

back

在 Chrome 浏览器的地址栏输入：
chrome://flags/#enable-parallel-downloading

# 下载谷歌商店的插件到本地

back

1、谷歌商店搜索插件，如SetupVPN - Lifetime Free VPN，复制地址(https://chrome.google.com/webstore/detail/setupvpn-lifetime-free-vp/oofgbpoabipfcfjapgnbbjjaenockbdp),打开网址(https://chrome-extension-downloader.com/),粘贴地址进行下载即可；
2、打开网页(https://www.crx4chrome.com/)进行下载也可； 3、打开网页(https://www.extfans.com/)进行下载也可；

# releaseLog

back

Chrome 78
- 1、鼠标悬停预览标签页的功能
  - 地址栏中输入chrome://flags/#tab-hover-cards
    选择Tab Hover Card Images的【Enabled】选项即可
- 2、Forced Dark Mode（强制黑暗模式）的功能
  - chrome://flags/#enable-force-dark
    将Force Dark Mode for Web Contents的选项更改为【Enabled】即可。

# chrome技巧

back

离线包安装，先解压78.0.3904.108_chrome_installer.exe为chrome.7z然后再随意解压
Ctrl+Shift+T打开最近关闭的网页

# chromeKey

back

# 标签页和窗口快捷键(Windows 和 Linux)

操作	快捷键
`打开新窗口`	Ctrl + n
在无痕模式下打开新窗口	Ctrl + Shift + n
`打开新的标签页，并跳转到该标签页`	Ctrl + t
`按标签页的关闭顺序重新打开先前关闭的标签页`	Ctrl + Shift + t
跳转到下一个打开的标签页	Ctrl + Tab 或 Ctrl + PgDn
跳转到上一个打开的标签页	Ctrl + Shift + Tab 或 Ctrl + PgUp
跳转到特定标签页	Ctrl + 1 到 Ctrl + 8
跳转到最右侧的那个标签页	Ctrl + 9
在当前标签页中打开主页	Alt + Home
`打开当前标签页浏览记录中记录的上一个页面`	Alt + 向左箭头键
`打开当前标签页浏览记录中记录的下一个页面`	Alt + 向右箭头键
`关闭当前标签页`	Ctrl + w 或 Ctrl + F4
`关闭当前窗口`	Ctrl + Shift + w 或 Alt + F4
最小化当前窗口	Alt + 空格键，然后按 n 键
最大化当前窗口	Alt + 空格键，然后按 x 键
退出 Google Chrome	Alt + f，然后按 x 键

# Google Chrome 功能快捷键(Windows 和 Linux)

操作	快捷键
打开 Chrome 菜单	Alt + f 或 Alt + e
显示或隐藏书签栏	Ctrl + Shift + b
打开书签管理器	Ctrl + Shift + o
`在新标签页中打开“历史记录”页`	Ctrl + h
`在新标签页中打开“下载内容”页`	Ctrl + j
打开 Chrome 任务管理器	Shift + Esc
将焦点放置在 Chrome 工具栏中的第一项上	Shift + Alt + t
将焦点放置在 Chrome 工具栏中最右侧的那一项上	F10
将焦点移到未聚焦于的对话框（如果显示）或所有工具栏	F6
打开查找栏搜索当前网页	Ctrl + f 或 F3
跳转到与查找栏中搜索字词相匹配的下一条内容	Ctrl + g
跳转到与查找栏中搜索字词相匹配的上一条内容	Ctrl + Shift + g
`打开“开发者工具”`	Ctrl + Shift + j 或 F12
`打开“清除浏览数据”选项`	Ctrl + Shift + Delete
在新标签页中打开 Chrome 帮助中心	F1
使用其他帐号登录或以访客身份浏览	Ctrl + Shift + m
打开反馈表单	Alt + Shift + i

# 地址栏快捷键(Windows 和 Linux)

操作	快捷键
使用默认搜索引擎进行搜索	输入搜索字词并按 Enter 键
使用其他搜索引擎进行搜索	输入搜索引擎名称，然后按 Tab 键
`为网站名称添加 www. 和 .com，然后在当前标签页中打开该网址`	输入网站名称并按 Ctrl + Enter 键
打开新的标签页并执行 Google 搜索	输入搜索字词并按 Alt + Enter 键
跳转到地址栏	Ctrl + l 或 Alt + d 或 F6
从页面中的任意位置搜索	Ctrl + k 或 Ctrl + e
从地址栏中移除联想查询内容	按向下箭头键以突出显示相应内容，然后按 Shift + Delete 键
将光标移到地址栏	Ctrl + F5

# 网页快捷键(Windows 和 Linux)

操作	快捷键
打开选项以打印当前网页	Ctrl + p
打开选项以保存当前网页	Ctrl + s
`重新加载当前网页`	F5 或 Ctrl + r
`重新加载当前网页（忽略缓存的内容）`	Shift + F5 或 Ctrl + Shift + r
`停止加载网页`	Esc
浏览下一个可点击项	Tab
浏览上一个可点击项	Shift + Tab
使用 Chrome 打开计算机中的文件	按住 Ctrl + o 键并选择文件
`显示当前网页的 HTML 源代码（不可修改）`	Ctrl + u
`将当前网页保存为书签`	Ctrl + d
将所有打开的标签页以书签的形式保存在新文件夹中	Ctrl + Shift + d
`开启或关闭全屏模式`	F11
放大网页上的所有内容	Ctrl 和 +
缩小网页上的所有内容	Ctrl 和 -
将网页上的所有内容恢复到默认大小	Ctrl + 0
向下滚动网页，一次一个屏幕	空格键或 PgDn
向上滚动网页，一次一个屏幕	Shift + 空格键或 PgUp
转到网页顶部	首页
转到网页底部	末尾
在网页上水平滚动	按住 Shift 键并滚动鼠标滚轮
将光标移到文本字段中的上一个字词起始处	Ctrl + 向左箭头键
将光标移到下一个字词起始处	Ctrl + 向右箭头键
删除文本字段中的上一个字词	Ctrl + Backspace
`在当前标签页中打开主页`	Alt + Home
重置页面缩放级别	Ctrl + 0

# 鼠标快捷键(Windows 和 Linux)

操作	快捷键
在当前标签页中打开链接（仅限鼠标）	将链接拖到标签页中
`在新的后台标签页中打开链接`	按住 Ctrl 键的同时点击链接
`打开链接，并跳转到该链接`	按住 Ctrl + Shift 键的同时点击链接
打开链接，并跳转到该链接（仅使用鼠标）	将链接拖到标签栏的空白区域
`在新窗口中打开链接`	按住 Shift 键的同时点击链接
在新窗口中打开标签页（仅使用鼠标）	将标签页拖出标签栏
将标签页移至当前窗口（仅限鼠标）	将标签页拖到现有窗口中
将标签页移回其原始位置	拖动标签页的同时按 Esc
将当前网页保存为书签	将相应网址拖动到书签栏中
在网页上水平滚动	按住 Shift 键并滚动鼠标滚轮
下载链接目标	按住 Alt 键的同时点击链接
显示浏览记录	右键点击“后退”箭头返回，或者左键点住“后退”箭头、右键点击“前进”箭头下一步，或者左键点住“前进”箭头下一步
在最大化模式和窗口模式之间切换	双击标签栏的空白区域
放大网页上的所有内容	按住 Ctrl 键并向上滚动鼠标滚轮
缩小网页上的所有内容	按住 Ctrl 键并向下滚动鼠标滚轮

# 错误收集

Mixed Content

Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure element 'http://...' . This request was automatically upgraded to HTTPS, For more information see https://blog.chromium.org/201...

# 谷歌浏览器

# 关于新版谷歌浏览器禁止http网站使用媒体设备

# 将收藏夹导出为json

# 解决Chrome浏览器调试的手机模式没有鼠标的问题

# 插件

# 其他力推插件

# GitHub树形显示代码Octotree

# GitHub代码阅读插件OctoLinker

# 前端开发都会用的插件fehelperfehelper

# 所谓几大必备插件

# 前端效能提升插件

# 自选基金助手，实时查看您关注的基金funds

# 开发者控制台

# 选取DOM元素

# 将你的浏览器变成编辑器

# 查找DOM中元素关联的事件

# 监控事件

# 查询代码块执行时间

# 将变量里的值排列成表格

# 检查DOM中的元素

# 列举元素的属性

# 检索最近一个结果的值

# 清空控制台和内存

# 源代码快速定位到某一行

# 你还一层层展开dom

# 在Elements面板调整dom结构很不方便

# 11+ chrome高级调试技巧

# 控制台引用上一次执行的结果

# $和$$选择器

# $i直接在控制台安装npm包

# chrome开发者工具各种技巧

# 在线调伪类

# 你是不是经常想不起来在哪绑定事件的

# 联调接口失败时，后台老哥总管你要response

# 美化js等文件

# 一键开启Chrome自带多线程下载功能，让速度飞起来

# 下载谷歌商店的插件到本地

# releaseLog

# chrome技巧

# chromeKey

# 标签页和窗口快捷键(Windows 和 Linux)

# Google Chrome 功能快捷键(Windows 和 Linux)

# 地址栏快捷键(Windows 和 Linux)

# 网页快捷键(Windows 和 Linux)

# 鼠标快捷键(Windows 和 Linux)

# 错误收集

# `$`和`$$`选择器

# `$i`直接在控制台安装npm包