fe-dev-playbook

# Chrome

目前最流行，最强大的浏览器，也是前端开发必备的浏览器。下面我们来介绍使用 Chrome 浏览器的一些小技巧。

# 快捷键

老生常谈，任何常用的应用的快捷键都必须熟练使用，玩得 66 的, 下面介绍常用的快捷键，再次声明本文档不是大而全的文档，Chrome 快捷键组合大概有几十种，但我们只需要记住最常用的几种就行了

Chrome 快捷键和前面讲到的 iterm2, VS Code 快捷键几乎一样，事实证明优秀的设计是每个应用都会共同遵守的

  • cmd + T 打开一个新的 Tab
  • cmd + 数字键 快速跳转到和数字键对应的 Tab， cmd + 9 跳转到最后一个 tab
  • cmd + shift + N 以无痕模式打开新窗口
  • cmd + w 关闭当前窗口
  • cmd + N 打开一个新的浏览器窗口

# 插件

Chrome 的插件商店 (opens new window)的强大程度无与伦比，下面来介绍我们开发中经常用到的一些插件

  • Proxy SwitchySharp 轻松快捷地管理和切换多个代理设置
  • 沉浸式翻译
  • tampermonkey 篡改猴，使用用户脚本自由地改变网络
  • Vimium C - 全键盘操作浏览器
  • FeHelper(前端助手)
  • 沙拉查词 (opens new window) 必装的插件，划词翻译功能是我目前用过的最舒服的
  • lighthouse (opens new window) Google 官方出品，可以分析出你的网页的性能数据，以及列出可以优化的点
  • React Developer Tools (opens new window) 开发 React 应用时用的辅助工具，大部分人应该都装了
  • Vue.js devtools (opens new window) 同上，开发 Vue 应用时的辅助工具，nuxt2 使用 5.3.3 版本
  • Octotree (opens new window) 方便你查看 github 项目结构
  • OctoLinker (opens new window) 查看 github 文件时可以一键打开引入文件的路径
  • Allow-Control-Allow-Origin (opens new window) 为不支持跨域请求的接口的响应头加 Allow-Control-Allow-Origin: *
  • AdBlock - 拦截整个网络的广告
  • Automa - 自动化重复操作
  • 稀土掘金 - 稀土掘金，一个帮助开发者成长的社区
  • Sider: ChatGPT 侧边栏
  • Docky.AI: ChatGPT 侧边栏 & 智能助手
  • 捕捉网页截图 - FireShot 的

← Whistle →