Chrome浏览器是前端工程师必备工具，以其强大的扩展程序和多进程架构、高速、简单搜索、更安全等特点为大家广泛使用。
接下来就简单介绍Chrome的调试技能和常用插件（针对前端）
一、调试技能
前端如果不需要兼容IE浏览器，那么基本就一直使用Chrome浏览器了，它是基于WebKit内核的，安全高效。Chrome调试面板浏览器位于右上角，如下图所示
或者使用 Ctrl+Shift+I 快捷键 都可以打开。
1、认识面板
1是元素，是构建这个网页的DOM树以及CSS样式渲染。在这里可以查看每个元素的占比和样式，可以修改显示。一般情况下关于样式的问题，我都会打开，在这里审查元素，一个一个的看，修改像素值，添加样式，得到预期效果，再往代码中写。讲真，CSS真的是难。
2是调试窗口，有js报错，警告，也可以在代码中console.log()来输出内容进行调试，这是开发中最常使用的技能了，对于值的获取和解析很有帮助，同时，它还可以直接输入代码执行。这里将error，warning，info分开在tab窗口显示，个人觉得更好观察一些。
3是资源，这里是对网页解析后的每个文件， 如果是不同域名或是不同站点，它都会分析出来。现在都多用框架构建网页，都是打包后在服务器上跑着的，就会出现这样，看不懂的js文件。不用担心，这些都是打包后的文件，还会有图片资源等。在这里可以断点debugger调试，就在这里的代码前点击一下就加好了断点，在执行的时候就会断点调试，你自己可以按下一步的按钮让其执行。
4是请求资源，关于此网页的所有资源都会请求，包括图片，样式，接口数据等。点击查看具体的某个请求，header表示请求头，即发送数据方，有很多字段，这些都是在学习HTTP中要了解的，也是前端开发必备的重要技能，学习HTTP协议非常的重要，
详见
https://blog.csdn.net/zr15829039341/article/details/64125868
preview是返回值，请求成功会返回前后端约定好的数据，拿到数据进行解析就可以展示到页面上。这里也是判断bug属于前端还是后端的一个重要的点，如果200ok，数据都正确，那就是前端没有展示好，或者400错误，都是前端的锅（不完全是，看情况）；反之如果是500错误，那就是后端的错误了。
5是存储对象，展示一些网页端存储的数据，比如Cookies、LocalStorage、SessionStorage、Mainfest、Cache等，常用的就是Cookies,它用来记住网站的用户名和密码，可以设置过期时间，但是它不太安全，现在都是后端设置cookie和session来进行用户的区别和登录状态判断。
二、常用插件推荐
Chrome浏览器最强大的特点可能就是扩展程序了，真的超级赞
1、谷歌访问助手
使用谷歌，当然是希望可以正(ke)确(xue)上网了，那么你就需要谷歌访问助手了。前提是不想花钱，然后还想正(ke)确(xue)上网，那你就可以使用它，但是你需要忍受它会将hao123设为默认页，不过没关系，我们之后有标签页，不怕。
下载：http://www.ggfwzs.com/
教程：
https://laod.cn/black-technology/google-chrome-gmail-chajian.html
反正我一直使用，搜索是够用了，有时会有一些不稳定，但是想一想，en，免费的，很好了。
链接:
https://pan.baidu.com/s/1kpRnO2s2wDWs4D8wa2fkHg
提取码: 1iut
2、Infinity pro 标签页
用着很舒服，可以添加很多快捷网站，可以切换壁纸，壁纸都超级好看，可以看天气，使用笔记，待办事项等，对于整天使用电脑的我们来说，新的标签页每天要打开不下10次，舒适和实用是很重要的。既然已经可以正(ke)确(xue)上网了，那就去应用商店直接搜索插件，然后添加吧。ps：使用本链接，进行下载也可以
链接:
https://pan.baidu.com/s/1QCm6SzNjNChDfi7IhOHlag
提取码: vyi7
顺便给大家推荐我常用的网站哈哈。
3、WEB前端助手
身为前端，使用的工具很多，这个插件就是将其集成了，有JSON转换，时间戳转换，二维码生成，网页截屏，正则，性能检测，ajax等工具，可以高效快捷的使用工具。ps：ps：使用本链接，进行下载也可以
链接:
https://pan.baidu.com/s/1djb74aPpb8c2IDyZ3Iwj0w
提取码: psvc
4、有道词典Chrome划词
对于程序员来说，英语是硬伤，很多文档或者回答都是英文的，想要短期内提升又很难，但是遇到不会的单词，再打开一个窗口来查词是不是就很难受了。所以需要一款即时查词的插件，在网页上，就像复制那样，选中需要查询的单词，就可以查询了，是不是很赞。哈哈。
5、Octotree
github是每个程序员都经常使用的网站，但是有一个问题，在看源码的时候，想要看另一个文件，就得返回上一个网页，再找到那个网页。很麻烦，有时候会忘记要去那个文件了。Octotree 会在左侧生成目录树，直接点击切换就可以了，是不是很赞的哈哈。
链接:
https://pan.baidu.com/s/1X9Zi_bjeAKhQWYVsoKGJbA
提取码: hemx
6、markdown here
超好用的一款插件，强烈推荐！！有它再也不用担心编辑器不支持markdown语法了，写好以后直接一键转换。而且也是一个跨平台神器，比如我们可以把简书写好的文章（带md语法）直接复制到微信公众号，然后一键转换，格式几乎无变化！
链接:
https://pan.baidu.com/s/1wEzQIGXt4ZhAA76hEf0ZMA
提取码: bey6
7、Adblock Plus：免除广告困扰
广告真的是令人很烦恼，有了这个插件，就可以屏蔽大多数的广告了。看博客时再也没有各种广告了哈哈。很赞。
链接:
https://pan.baidu.com/s/1nUN33pglve5zoocEoIvhlA
提取码: b2cz
ps: 先写到这，后续补充
PS：微信公众号 FEvivi
获取所有下载包，回复 chrome 即可获取上述所有插件
关注后回复 vivi 获取我的微信号，望不吝赐教，pps：可轻撩哈哈
感谢大佬们阅读，希望大家头发浓密，睡眠良好，情绪稳定，早日实现财富自由~