Web前端开发进阶篇Chrome浏览

白癜风怎么看好 https://yyk.familydoctor.com.cn/2831/newslist_8_1.html

本文首发于今日头条。作者Web前端开发进阶篇

自Google发布Chrome浏览器以来，其随着Chrome浏览的优化及其附带的Chrome开发者工具和额外的扩展程序，受到了广大开发者的喜爱，越来越多的前端开发人员喜欢在Chrome里开发调试代码，对开发人员非常友好，许多的优秀插件可以帮助开发人员更高效完成开发工作，另外可以登录，不管到哪里，只要一登录就可以实现同步，极为方便，只是目前Chrome不能使用谷歌的搜索引擎，以及谷歌账号相关服务。但是不影响我们开发者调试，部分功能可通过代理服务器安装谷歌访问助手，下载扩展程序即可使用，安装完之后就是如下图：

这是我的Chrome，为了开发调试和便捷使用安装的一些扩展插件，用起来是极其方便，关于这图有什么不懂得可以下方留言咨询。

提高前端技术，先从使用谷歌调试器做起

具体的调试呢，我们就需要打开开发者工具然后进行调试，我们要做到明白每一项内容，才能为我们开发使用。下面我就给大家介绍一下关于开发者工具的一些调试方法，认识学习一下开发者工具。

选择功能

选择功能

点击选择按钮，在网页中选择一个元素，这时候会选择相应的DOM结构，点击后变成选择状态，出现相关DOM结构的一些信息。（下方会出现选择元素的DOM结构和CSS信息）

设备按钮

设备按钮

点击就会进入移动端的开发模式，如上图点击第一个黑色小按钮就会弹出不同的移动设备，可选择不同的尺寸比例，这与真实的移动设备相差无几，是非常合适进行响应式开发和移动端的开发。可自定义移动端尺寸，缩放，限制网络流量和CPU占用率，横屏调试等。

Element面板

Element面板

显示Html页面的DOM结构，可直接在上面修改DOM元素，标签，以及CSS的修改，还有页面的盒子模型，点击相关的DOM结构，右键可进行直接修改DOM（EditasHTML），删除DOM（DeleteHTML），焦点定位（focus）等常用的功能，查看相关的盒子模型知道元素对应的padding，border，margin值。选中相应的DOM，可在右边style区域修改其样式，也可修改页面相关的js。通过Element修改调试细微的相关DOM，要快得多哦。

Console控制台

Console控制台

用于打印输出一些相关的信息，在这里我们能看页面中的报错，警告信息，你可在这里输入相关的代码进行调试。如图：

像Console控制台（1）中有报错信息，我们可直接点击进入相关详细的报错文件，然后查看出错的文件，方便我们查看出错的地方和调试错误。

Sources面板

Sources面板

Sources.js资源页面里我们可以找到我们打开当前页面中的js源文件，方便我们查看和调试，图中我们可以看到当前页面的css、images、js和一些上传的路径，我们可以从其中找到一些图片和调试我们页面中的js，说到调试，这里面就不得不提打断点调试，也就是Debug调试，如下图：

但是很多人却对这个使用起来不是很会，看不清怎么运行的，建议大家找些简单的页面调试，看看具体是怎么一步一步走的，此外推荐大家使用如下图的Snippets代码片段功能，点击创建一个新的代码片段，写完后右键运行，然后去控制台查看相关的信息，下图我新建一个new.js，然后去运行去控制台查看。

Network网络请求

Network网络请求

这里呢可以看到所有的资源请求，页面只要有的都会通过请求加载到这里，你会看到很多（如图片，HTML、CSS、JS，视频、文件等等），在平时的开发中我们主要用于网络请求的查看和分析，分析接口的传输情况，请求头，参数，路径，及当前的文件，这个尤为重要，除了起到判断请求的状况外还可以看看加载时间，分析哪些加载的慢，然后做出调整是页面加载变快。

Performance面板

Performance面板

这是页面运行时的性能分析，它会模拟移动设备的CPU，一般情况下移动设备的CPU会比台式机笔记本弱很多，但当你想分析页面的时候，可以用这个来分析。

Memory面板

Memory面板

这是内存占用分析功能，具体到每一个页面，我们可以使用Performance面板具体分析也页面的内存使用情况（选择Memory然后录制一段当前页面进行你想监测的一些页面操作，时间自己掌握。）

Application面板

Application面板

该面板主要记录网站加载的所有资源信息，包括存储数据（localStorage、sessionStorage、indexedDB、WebSQL、Cookie）、缓存数据、字体、图片、脚本、样式表等。这里面就简单多了。

LocalStorage如果你在开发中使用了localstorage来存储键值对（KVPS），那么就可以通过它来增删改查这个键值对。

ApplicationCache你可以使用ApplicationCache窗格去查看通过ApplicationCacheAPI创建的资源。

Frames将页面上的资源按frame类别进行组织显示。

Security面板

Security面板

通过该面板可以去调试当前网页的安全和认证等问题，检测你的网站是否添加了HTTPS。没有的话就会是下面的提示，如果你添加了HTTPS，则会弹出这样的一条信息：Thispageissecure(validHTTPS)。

Audits面板

Audits面板

对当前的网页进行网络利用情况，网页性能方面做出诊断，并给出一些优化建议，比如列出一些没有用到的CSS、JS。选中相应的NetworkUtilization，WebPagePerformance，点击Run，将会对当前的页面进行网络利用率和页面的性能优化作出优化诊断，并给出相应的优化建议。

额外的扩展程序

Chrome浏览器

1、Postman

在开发过程中，后端接口都是有发起的AJAX请求而获取到的相关数据，我们干前端的，后端提供接口以后，我们要进行相应接口的数据模拟访问，我们不可能吧每个请求代码都写到文件里编译好了再去浏览器内查看，这时候就可以安装一个这个插件，功能非常强大，填好我们相应的参数，点击send，就可以看到返回的数据。

Postman

2、VueDevtools

在进行Vue开发的过程中，这个扩展程序可谓是助手神器啊，它能帮助你进行Vue开发调试。避免了我们在编译工具中的调试，有时候Console控制台进行调试，但是很不方便，在这里调试真的方便。

VueDevtools

3、FullDownload

FullDownloa面板呢，就跟我们使用的仿站小工具一样，只要你输入你想扒的网站路径，然后点击就能Copy下来了，比网上那些扒站小工具好用的多，实惠的多。

FullDownload

4、Lighthouse

简称灯塔，它就更厉害了，跟做安全检测的“绿盟”一样，能从很多方面对网站进行一个安全监测，然后给你评分，和局部的优化建议。例如，从性能，辅助功能、最佳实践、搜索引擎优化、渐进式Web应用等方面入手来检测你的网站。

LighthouseLighthouse

此外还有其他的扩展程序大家可以看我的图（Chrome浏览器扩展程序），那张图里有我安装的扩展程序。

总结

作为前端开发人员我们必须要学会熟练地使用Chrome浏览器，以辅助我们进行开发，在提高我们的开发效率的同时，也能够让我们的上网方式变得便捷利索。