整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
歌瀏覽器簡潔清爽的界面、暢快的瀏覽體驗、資源豐富的插件，也讓它成了前端開發人員所喜愛的瀏覽器。而好用的插件，能幫助開發者在開發過程中減少很多工作量，帶來如虎添翼的效果。今天就給大家推薦一些非常實用、在程序員中口碑也較好的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
以上就是今天的推薦，你常用的前端擴展插件有哪些，歡迎留言和千鋒廣州小編一起討論哦！
站建設CSS3中引入的新特性和功能。這些新特性極大地增加了web程序的表現能力，同時簡化了web UI的編程模型。下面成都網站建設蜀風科技將詳細介紹這些CSS3的新增特性。
1、強大的選擇器
網站建設CSS3的選擇器在CSS2.1的基礎上進行了增強，它允許設計師在標簽中指定特定的HTML元素而不必使用多余的類、ID或者JavaScript腳本。
如果希望設計出簡潔、輕量級的網頁標簽，希望結構與表現更好地分離，高級選擇器是非常有用的。它可以大大簡化我們的工作，提供編寫代碼效率，并讓我們很方便地制作出可維護性的頁面。
2、半透明度效果的實現
網站建設中RGBA不僅可以設定色彩，還能設定元素的透明度。無論是文本、背景還是邊框均可使用該屬性。該屬性的語法在其支持的瀏覽器中形同。
3、多欄布局
網站建設新的CSS3選擇器可以讓用戶不必使用多個DIV標簽就能實現多欄布局。瀏覽器解釋這個屬性并生成多欄，讓文本實現一個仿報紙的多欄結構。
4、多背景圖
CSS3允許背景屬性設置多個屬性值，這樣就可以在一個元素上添加多層背景圖片。
5、塊陰影和文字陰影
盡管box-shadow和text-shadow再CSS2中就已經存在，但是它們未被廣泛應用，它們將在CSS3中被廣泛采用。塊陰影和文字陰影可以不用圖片就能對HTML元素添加陰影，增加顯示的立體感增強設計的細節。塊陰影使用box-shadow屬性，文字陰影使用text-shadow屬性，該屬性目前在Safari和Chorme中可用。
6、圓角
網站建設CSS3新功能中最常用的一項就是圓角效果，Border-radius無須背景圖片就能給HTML元素添加圓角。不同于添加JavaScript或多余的HTML標簽，僅僅需要添加一些CSS屬性并從好的方面考慮。這個方案是清晰的和比較有效的，而且可以讓你免于花費幾小時來尋找精巧的瀏覽器方案和基于JavaScript圓角。
7、邊框圖片
網站建設中Border-image屬性允許在元素的邊框上設置圖片，這使得原本單調的邊框樣式變得很豐富。讓你從通常的solid、dotted和其他邊框樣式中解放出來。改屬性給設計師一個更好的工具，用它可以方便地定義設計元素的邊框樣式，比background-imag屬性或枯燥的默認邊框樣式更好用。也可以明確的定義一個邊框可以被如何縮放或平鋪。
8、形變效果
網站建設通常使用CSS和HTML我們是不可能使用HTML元素旋轉或傾斜一定角度的。為了使元素看起來更具有立體感，我們不得不把這種效果做成一個圖片，這樣就限制了很多動態的使用應用場景。Transform數學的引入使我們以前通常要借助SVG等矢量繪圖手段才能實現的功能，只需要一個簡單的CSS屬性就能實現。
9、媒體查詢
媒體查詢可以讓你為不同設備基于它們的能力定義不同的樣式。如在可視區域小于400像素的時候，想讓網站側欄顯示在主內容的下邊，這樣它就不應該浮動并顯示在右側了。
10、CSS3線性漸變
漸變色是網頁設計中很常用的一項元素，它可以增強網頁元素的立體感，同事使單一顏色的頁面看起來不是那么突兀。過去為了實現漸變色，通常需要先制作一個漸變的圖片，將它切割成很細的一小片，然后使用背景重復是整個HTML元素擁有漸變的背景色。這樣做有兩個弊端：為了使用圖片背景，很多時候使得本身簡單的HTML結果變得復雜；另外，受制于背景圖片的長度火寬度，HTML元素不能靈活的冬天調整大小。CSS3中Webkit和Mozilla對漸變都有強大的支持。
成都蜀風科技打造與企業品牌相匹配的網站及微信開發，對每一個網站建設和微信開發項目，都以策略先行，再將創意與技術完美結合。 為企業打造出與企業品牌氣質相匹配的網絡品牌形象。 我們始終保持行業領先開發水平，不斷掌握領先的網絡技術。
之前我做了個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基礎上進行擴展，好看又簡單易上手~
那么就開始吧
這個頁面用到的依賴如下
直接復制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
關于在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傳入數據或者請求接口來填充真實數據~
寫完網頁模板之后保存
接下來配置一下路由就行
我把這個頁面放在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),
]
編輯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
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
