Chrome调试技能和经常使用插件彻底指北

Chrome浏览器是前端工程师必备工具，以其强大的扩展程序和多进程架构、高速、简单搜索、更安全等特色为你们普遍使用。

接下来就简单介绍Chrome的调试技能和经常使用插件（针对前端）

1、调试技能

前端若是不须要兼容IE浏览器，那么基本就一直使用Chrome浏览器了，它是基于WebKit内核的，安全高效。Chrome调试面板浏览器位于右上角，以下图所示

或者使用 Ctrl+Shift+I 快捷键 均可以打开。

一、认识面板

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来进行用户的区别和登陆状态判断。

2、经常使用插件推荐

Chrome浏览器最强大的特色可能就是扩展程序了，真的超级赞

一、谷歌访问助手

使用谷歌，固然是但愿能够正(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

二、Infinity pro 标签页

用着很舒服，能够添加不少快捷网站，能够切换壁纸，壁纸都超级好看，能够看天气，使用笔记，待办事项等，对于成天使用电脑的咱们来讲，新的标签页天天要打开不下10次，温馨和实用是很重要的。既然已经能够正(ke)确(xue)上网了，那就去应用商店直接搜索插件，而后添加吧。ps：使用本连接，进行下载也能够

连接:

https://pan.baidu.com/s/1QCm6SzNjNChDfi7IhOHlag

提取码: vyi7

顺便给你们推荐我经常使用的网站哈哈。

三、WEB前端助手

身为前端，使用的工具不少，这个插件就是将其集成了，有JSON转换，时间戳转换，二维码生成，网页截屏，正则，性能检测，ajax等工具，能够高效快捷的使用工具。ps：ps：使用本连接，进行下载也能够

连接:

https://pan.baidu.com/s/1djb74aPpb8c2IDyZ3Iwj0w

提取码: psvc

四、有道词典Chrome划词

对于程序员来讲，英语是硬伤，不少文档或者回答都是英文的，想要短时间内提高又很难，可是遇到不会的单词，再打开一个窗口来查词是否是就很难受了。因此须要一款即时查词的插件，在网页上，就像复制那样，选中须要查询的单词，就能够查询了，是否是很赞。哈哈。

五、Octotree

github是每一个程序员都常用的网站，可是有一个问题，在看源码的时候，想要看另外一个文件，就得返回上一个网页，再找到那个网页。很麻烦，有时候会忘记要去那个文件了。Octotree 会在左侧生成目录树，直接点击切换就能够了，是否是很赞的哈哈。

连接:

https://pan.baidu.com/s/1X9Zi_bjeAKhQWYVsoKGJbA

提取码: hemx

六、markdown here

超好用的一款插件，强烈推荐！！有它不再用担忧编辑器不支持markdown语法了，写好之后直接一键转换。并且也是一个跨平台神器，好比咱们能够把简书写好的文章（带md语法）直接复制到微信公众号，而后一键转换，格式几乎无变化！

连接:

https://pan.baidu.com/s/1wEzQIGXt4ZhAA76hEf0ZMA

提取码: bey6

七、Adblock Plus：免除广告困扰

广告真的是使人很烦恼，有了这个插件，就能够屏蔽大多数的广告了。看博客时再也没有各类广告了哈哈。很赞。

连接:

https://pan.baidu.com/s/1nUN33pglve5zoocEoIvhlA

提取码: b2cz

ps: 先写到这，后续补充

PS：微信公众号 FEvivi

获取全部下载包，回复 chrome 便可获取上述全部插件

关注后回复 vivi 获取个人微信号，望不吝赐教，pps：可轻撩哈哈

感谢大佬们阅读，但愿你们头发浓密，睡眠良好，情绪稳定，早日实现财富自由~