作为一名 developer 如何正确地使用 Chrome

作为一名 developer 如何正确地使用 Chrome

场景

现如今,Google Chrome 是全世界最流行的浏览器,具体有多流行,可以看看 浏览器市场份额统计。然而,有许多人,只是简单的安装了 Chrome,然后直接使用,却并未想过如何才能更好的使用它。

DevTool

Chrome 的开发者工具可以说是目前最好的了,然而除了简单的查看 Network/Element 之外,你可还使用过其他的功能?下面让我们一起来探讨一下 DevTool 的 奇淫技巧 吧!

Network

  1. Copy => Copy as fetch
    fetch 方式复制这个请求,如果你对 fetch 还不了解,可以去 MDN: 使用 Fetch 上查看它,并尝试使用它。这是一个浏览器原生的接口,用于进行 HTTP 操作。相比于 XMLHttpRequestfetch 通常被称为下一代的 Ajax 技术。
    这也正是吾辈将之单独列出的重要原因,因为它是纯 JavaScript 的,所以我们可以直接在浏览器中对其进行测试/修改/执行,这点对于 user.jsnodejs 爬虫 尤其重要。

    Copy => Copy as fetch

  2. Network 设置

    • Disable Cache:禁用网络缓存,开发阶段必备。如果你不想在开发时使用 CS-R 进行硬性重新加载,那最好禁用掉它,避免修改的代码没有及时生效。
    • Preserve log:保留日志。一般而言,当你刷新页面后,Network 将被清空。然而有时候,我们想知道代码修改前后请求发生了哪些变化(修改之前请求一切正常,修改之后就 GG 了),这是便需要使用该选项保留所有的网络请求,方便对比刷新前后请求的变化。
    • Group by frame:根据 frame 对请求进行分组。常见于 Web 后台开发,很多后台项目都使用 frame 实现了标签页的功能,所以按照 frame 进行分组会方便进行查看一点。

    Network 设置

Element

  1. Copy => Copy selector
    复制 DOM 元素的选择器,该选择器实际上是供 Selectors API 使用(querySelector/querySelectorAll),但 jquery 的选择器应该兼容它。我们复制完选择器后就可以使用 Selectors APIjquery 之类的选择器去获取到元素,然后对之进行操作。这对 user.js/nodejs 爬虫/快速获取元素 有着重要的意义。

    Copy => Copy selector

  2. Break on
    在开发过程中,你是否遇到过这样的问题:“某个元素改变了,但始终不知道是那里的代码改变的”。这时候,DOM 断点就派上用场了,监听某个元素,并根据条件触发并暂停当前 JavaScript 进入 Debug 模式。

    • subtree modification:当子节点发生改变时触发
    • attribute modification:当节点属性发生改变时触发
    • node removal:当节点移除时触发

    Break on

  3. DOM 元素强制指定状态
    某个元素只有在指定状态下才会有某些效果,当你想让这个元素的状态一直维持不变以仔细观察时,就需要强制指定元素的状态了。
    思考以下场景
    下拉菜单只有在鼠标悬浮时才会展开,但鼠标移到 DOM 元素查看时却收起来了,感觉非常难受.JPG!幸好,浏览器为我们提供了这个功能。
    Force state

Sources

  1. Drawer Show Search
    显示搜索框,全文搜索当前页面载入的代码,用于快速定位到指定的代码片段。如果你不知道某段代码在什么地方,就可以使用它快速查找。搜索的内容可以使用正则表达式以及区分大小写模式。

    在除了 Console 选项卡之外都可以使用 CS-F 直接打开

    Drawer Show Search

  2. Debug

    • 预览表达式结果
      当你选中一个表达式后,鼠标悬浮在选中的代码上,Chrome 就会自动计算出表达式的结果,并在鼠标附近显示出来。

      注:

      • 表达式不是代码片段,所以如果选中多段代码是不会得到结果的
      • 非纯函数,例如使用了 Ajax 请求
    • Evaluate in console
      想要查看某段代码执行的结果,便可以选中这段代码,然后右键选择在控制台中执行它。该功能与上面的预览表达式结果相辅相成。
    • Conditional breakpoint
      条件断点。允许指定某个断点在指定表达式为 true 的情况下才停止,便于在循环中使用断点调试某种特殊情况。
    • Deactivate breakpoints
      停用所有的断点。当我们打了一大堆断点之后,想直接看一下效果,又不想把现有的断点删除,就可以暂时停用现有断点,方便查看效果。

使用插件

自从 Firefox59 以来,随着大量旧体系的插件大量失效,Firefox 的插件库已经不像以往了。如今,Chrome 的插件库是这个星球上最庞大的浏览器插件库了。如果你还没有使用过插件,那恐怕只能使用 Chrome 的一部分功能罢了。

日常使用

  • AutoPagerize:自动翻页插件,浏览很多网站时不需要手动点击下一页了,可以自动加载出来下一页的结果。
  • Checker Plus for Gmail™:对于日常使用 Gmail 的吾辈而言非常有用
  • crxMouse Chrome™ 手势:鼠标手势插件,可以使用手势更简单地完成一些事情
  • Dark Reader:为所有网站加上黑色主题,大部分情况下都还不错
  • Enhanced Github:显示 GitHub Repository 大小,允许单独下载每一个文件
  • Enhancer for YouTube™:怎么说呢,Youtube 已经很好了,但吾辈还是觉得需要这个插件来优化播放体验
  • Fatkun 图片批量下载:批量下载网页上的图片,偶尔用一下吧
  • Free Download Manager:FDM Chrome 集成插件,将 Chrome 下载链接使用 FDM 多线程下载
  • GitHub Hovercard:GitHub 增强插件,鼠标悬浮在仓库链接上面就可以预览
  • Image Search Options:使用右键以图搜图
  • Isometric Contributions:GitHub 美化插件,将 GitHub 贡献以 3D 的效果显示出来
  • JetBrains IDE Support:使用 Chrome 实时显示 IDEA 的 HTML/CSS/JavaScript 文件,与 IDEA 的插件配合使用
  • LastPass: Free Password Manager:跨平台的免费密码管理器,有了这个之后再也不用所有网站都使用同一个密码了
  • Mailto: for Gmail™:对于 mailto 协议的链接以 Gmail 网页版打开
  • Markdown Here:在线将 Markdown 转换为有格式的文档,例如在一个普通的富文本编辑器(不支持 Markdown)中,可以先用 Markdown 语法写内容,然后转换一下就得到了有样式的内容了。
  • Neat URL:移除网址中的无用段,例如返利链接后面的参数
  • Octotree:GitHub 代码树状图插件,方便查看项目文件
  • OwO:颜文字插件,多亏了这个让吾辈能够愉快的刷推了
  • Proxy SwitchyOmega:科学上网必需
  • Stylus:使用自定义网站样式的插件,比 Stylish 的名声好一些
  • Tabliss:新标签页插件
  • Tampermonkey:使用自定义网站脚本的插件,可以使用各种 user.js 脚本,相当于小型的插件管理器了
  • The Great Suspender:自动休眠标签页,避免 Chrome 使用的内存太过庞大
  • uBlock Origin:日常上网必须,屏蔽各种广告,比 ADBlock 的名声好一些
  • Vue.js devtools:在 DevTool 中添加 VueJS 选项卡,便于对 VueJS 进行调试
  • WebRTC Network Limiter:阻止浏览器通过 WebRTC 泄露 IP 地址
  • WEB 前端助手(FeHelper):貌似是百度的前端插件,但目前还没有什么流氓行为
  • 快翻译:这个翻译插件是真心不错,某种意义上讲比 Chrome 自带的翻译都要好(#大雾)
  • 扩展管理器(Extension Manager):插件很少的时候还好,一多起来还是需要一个插件进行管理,快速启用和禁用一些插件,根据场景切换启用插件列表

Stylus

为网页自定义 CSS 样式,主要用于网站美化,但也可以用于屏蔽网站内容(现在某些网站会检测用户浏览器是否安装了 uBlock Origin 之类的广告过滤插件)。

例如吾辈就写了一些 css 来提高使用浏览器的体验

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
/* 全局字体设置 */
* {
font-family: 'RTWS YueGothic Trial Regular';
}

/*滚动条美化*/
::-webkit-scrollbar {
width: 6px;
height: 6px;
}

::-webkit-scrollbar-track-piece {
background-color: #cccccc;
-webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:horizontal {
width: 5px;
background-color: #cccccc;
-webkit-border-radius: 6px;
}

/*滚动条滑块的宽高*/
::-webkit-scrollbar {
width: 9px;
height: 9px;
}

::-webkit-scrollbar-track-piece {
background-color: transparent;
}

::-webkit-scrollbar-track-piece:no-button {
}

::-webkit-scrollbar-thumb {
background-color: #3994ef;
border-radius: 3px;
}

/*滑块的样式*/
::-webkit-scrollbar-thumb:vertical {
height: 5px;
background-color: #4afffe;
-webkit-border-radius: 6px;
}

/*鼠标悬浮于滑块上*/
::-webkit-scrollbar-thumb:hover {
background-color: #39ffff;
}

/*鼠标按下于滑块上*/
::-webkit-scrollbar-thumb:active {
background-color: #00fffd;
}

/*纵向滚动条的宽度*/
::-webkit-scrollbar-button:vertical {
width: 9px;
}

/*横向滚动条的宽度*/
::-webkit-scrollbar-button:horizontal {
width: 9px;
}

/*纵向滚动条的开始按钮(右上角)*/
::-webkit-scrollbar-button:vertical:start:decrement {
background-color: #00fffd;
}

/*纵向滚动条的开始按钮(右下角)*/
::-webkit-scrollbar-button:vertical:end:increment {
background-color: #00fffd;
}

/*横向滚动条的开始按钮(左下角)*/
::-webkit-scrollbar-button:horizontal:start:decrement {
background-color: #00fffd;
}

/*横向滚动条的结束按钮(右下角)*/
::-webkit-scrollbar-button:horizontal:end:increment {
background-color: #00fffd;
}

body::-webkit-scrollbar-track-piece {
background-color: white;
}

当然,也安装了一些其他人写好的

Tampermonkey

非常强大的一个插件,如果真要展开说明,恐怕又要写一篇博客了。可以将用户自定义的 js 代码 注入 到网页中,而这,其实就代表着,任何只要会 JavaScript 的人,都可以在自己浏览器上任意修改网站内容。

那么,说的好像很厉害的样子,具体能做些什么呢?下面列出吾辈常用的 user.js 脚本

哦,如果你很懒,也可以先去 Greasy Fork 搜索一下是否有你需要的 user.js 脚本。有的话可以直接安装。

Greasy Fork 上的脚本全部都是开源的,如果你不信任其他开发者,可以随意对脚本进行检查。


那么,有关 Chrome 的使用就到这里啦。如果你也知道什么有趣的操作,可以在下方留言告诉吾辈呢