歌浏览器简洁清爽的界面、畅快的浏览体验、资源丰富的插件，也让它成了前端开发人员所喜爱的浏览器。而好用的插件，能帮助开发者在开发过程中减少很多工作量，带来如虎添翼的效果。今天就给大家推荐一些非常实用、在程序员中口碑也较好的Chrome插件，下面和千锋广州小编一起来看看吧！

一、Lighthouse前端性能优化测试工具

对于前端开发人员来说，自己开发的App或者Web page性能的好坏，常常是肉眼很难辨别的。这时候就需要专业的网站测试工具，通过这些具象化的分析报告，才能更直观地知道产品还有哪些需要优化的地方。Lighthouse插件就是这样一款开源的自动化检测工具，由谷歌官方团队提供，正儿八经的行业标杆。

Lighthouse插件可以对需要测试的页面运行一系列评估，然后反馈给开发者详细的优化指导建议。主要包括网站页面性能、PWA、可访问性（无障碍）、SEO等内容。

开发者能够根据这些标准进行网站优化和完善，提高用户体验，再也不用盲目地一通乱改了。下载地址：http://uee.me/cQCz2

二、Vue.js devtools调试插件

Vue.js devtools是一款在Chrome商店和火狐商店里拥有上百万用户的人气插件，有“Vue调试神器”的称号。由于Vue是数据驱动的，所以开发者在开发调试中查看DOM结构不能够解析出什么。但是借助Vue.js devtools这款插件，大家就可以很方便地对数据结构进行解析和调试了。

安装好插件后，再按F12打开开发者工具，在开发者工具的菜单栏最后面会看到VUE，选中它就进行行云流水的操作了。

下载地址：http://uee.me/cQC2h同类的调试工具，比较出名的还有Facebook出品的React Developer Tools插件。安装这款插件后，再在谷歌浏览器中进行调试时，就可以查看应用程序的React组件分层结构，而不是神秘的浏览器DOM了。

下载地址：http://rrd.me/fFaeD

三、WEB前端助手(FeHelper)

一款国产的、超级实用的前端开发工具合集，之前也用专文介绍过这款插件。WEB前端助手(FeHelper)包含多个独立小应用，比如：Json工具、代码美化、代码压缩、二维码、Postman、markdown、网页油猴、便签笔记、信息加密与解密、随机密码生成、Crontab等等。

它基本涵盖了前端开发经常会使用到的所有基础功能。由于WEB前端助手是国人开发，所以大家用起来会更加顺手。

下载地址：http://uee.me/cQC2z

四、Wappalyzer网站技术分析插件

开发者有时候也是需要在别人的网站上寻找灵感和借鉴长处的。那么，当我们在浏览到一个感觉很不错的网站，想知道他们运用了什么框架和技术时该怎么办呢？这个时候，Wappalyzer就能帮上忙了。Wappalyzer是一款功能强大的、且非常实用的Chrome网站技术分析插件。

它能够分析网站所采用的平台构架、网站环境、服务器配置环境、JavaScript框架、编程语言等参数。安装完毕后，在你感兴趣的网页点击Wappalyzer的插件图标，就能在下拉窗口里面看到这个网站用到的框架和技术了。

下载地址：http://uee.me/cQC29

五、Web Maker网页代码编辑器

作为一名开发人员，大家可能已经用过了许多代码编辑器。的确是有很多编辑器的功能十分强大，但是在一些需要快速记录代码的紧急场合中，打开这些编辑器就显得比较麻烦了。Web Maker就是一款能快速在浏览器上编写网页代码的Chrome插件。

它可以让你的谷歌浏览器拥有即时编辑代码的功能，主要用于编写HTML、CSS和JavaScript代码。安装插件后，只需点击插件图标即可在新窗口中进行工作。最重要的是， Web Maker支持离线使用和代码自动保存。如果你觉得黑色太单调，还有多个编辑器主题和其他可配置的设置。

下载地址：http://uee.me/cQC2K

以上就是今天的推荐，你常用的前端扩展插件有哪些，欢迎留言和千锋广州小编一起讨论哦！

言

之前我做了个Django的项目，为了让管理后台更加美观，我对Django（应该说是SimpleUI的）默认的Admin后台主页进行改造，具体可以看这篇文章：项目完成 - 基于Django3.x版本 - 开发部署小结

之前的两篇关于Django3.x开发部署小结的文章介绍的都是数据库、接口、性能方面的，看到有朋友留言对后台主页的改造表示有兴趣，所以就写一篇来介绍一下~

分析

改造基于我定制的 DjangoStarter 开发模板，本文代码会同步提交到Github，项目地址：https://github.com/Deali-Axy/DjangoStarter

DjangoStarter的Admin使用了SimpleUI，这是一个基于Vue、ElementUI的Admin主题，使用ElementUI的tab组件实现了多标签的功能，这个组件本身支持自定义主页，所以我的思路就是用Django的Template写个新的页面，配置好路由然后替换掉SimpleUI的默认主页。

默认主页长这样，有点单调

改造之后是这样

嘿，比原来好一些了，内容丰富了~

接下来我们一步步来实现这个主页的改造。

依赖

网上有很多后台模板，国产的有ElementUI、AntDesign这些，都挺好用的，但要好看得会CSS（很遗憾我不太会）

于是我把目光投向了国外的开源组件，其中AdminLTE就很不错哇，在我最熟悉的Bootstrap基础上进行扩展，好看又简单易上手~

那么就开始吧

这个页面用到的依赖如下

• 目前AdminLTE版本是3.2，基于Bootstrap4.6
• 图表使用chart.js，版本3.8
• 图标使用fontawesome，使用免费的6.0版本

直接复制package.json的依赖部分：

"dependencies": {
    "@fortawesome/fontawesome-free": "^6.0.0",
    "admin-lte": "3.2",
    "bootstrap": "^4.6.1",
    "chart.js": "^3.8.0",
    "jquery": "^3.6.0",
}

直接复制保存，然后yarn命令安装依赖~

PS：推荐使用yarn管理npm包，当然也可以直接用npm

修改Gulp任务

关于在Django中使用和管理前端资源，具体可以参考这篇文章：Django项目引入NPM和gulp管理前端资源

//使用 npm 下载的前端组件包
const libs=[
    {name: "admin-lte", dist: "./node_modules/admin-lte/dist/**/*.*"},
    {name: "chart.js", dist: "./node_modules/chart.js/dist/**/*.*"},
    {name: "jquery", dist: "./node_modules/jquery/dist/**/*.*"},
    {name: "bootstrap", dist: "./node_modules/bootstrap/dist/**/*.*"},
];

// 使用 npm 下载的前端组件，自定义存放位置
const customLibs=[
    {name: 'font-awesome', dist: './node_modules/@fortawesome/fontawesome-free/**/*.*'},
]

保存之后在项目根目录下执行gulp move即可~

开始写页面

我们在templates/admin目录下新建extend_home.html

具体代码我就不贴了，已经上传到github上了，可以看这里：https://github.com/Deali-Axy/DjangoStarter/blob/master/templates/admin/extend_home.html

图表我用的假数据做的饼图，数据是这样的

let exampleData=[
    {label: 'a', value: 10},
    {label: 'b', value: 10},
    {label: 'c', value: 10},
    {label: 'd', value: 10},
    {label: 'e', value: 10},
    {label: 'f', value: 10},
]

新闻和快捷操作的文字用了Django自带的随机文字生成标签

{% lorem 6 w random %}

具体用法可以看官方文档：https://docs.djangoproject.com/zh-hans/4.0/ref/templates/builtins/#lorem

PS：这个页面里所有内容都是假数据，实际使用的时候可以通过context传入数据或者请求接口来填充真实数据~

写完网页模板之后保存

接下来配置一下路由就行

写一下View

我把这个页面放在DjangoStarter的默认App里

编辑apps/core/views.py文件

新增一个函数

# 扩展admin主页，美化后台
def extend_admin_home(request):
    return render(request, 'admin/extend_home.html')

配置路由

urlpatterns=[
    # ...
    path('admin_home', views.extend_admin_home),
]

配置SimpleUI主页

编辑config/settings.py

在SimpleUI配置的区域里添加这行代码

SIMPLEUI_HOME_PAGE=f'/{URL_PREFIX}core/admin_home'

PS：因为DjangoStarter加了个URL前缀功能，所以要把URL_PREFIX带上

搞定

这样就搞定了，具体代码比较长，可以看GitHub项目：https://github.com/Deali-Axy/DjangoStarter

不想跟着步骤一步步来的同学可以试试我的DjangoStarter模板哈，全都整合好了，开箱即用

文章来自https://www.cnblogs.com/deali/p/16418020.html