iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 7
10
Modern Web

前端工具百寶箱 - 六角學院系列 第 8

10 個好用的 Chrome 插件(上)

又來到工欲善其事,必先利其器的時間~
今天要來介紹針對開發 10 個好用的 Chrome 插件,使用這些插件有什麼好處呢?

  1. 可以快速且清楚了解其他網站使用哪些套件或是字體,甚至是網頁結構
  2. 了解網站速率及可優化的區塊有哪些
  3. 既便利又有效率的進行開發

Wappalyzer:了解網站使用哪些技術與工具

官網:https://www.wappalyzer.com/

在官網中也可以直接貼上網址來查詢
https://ithelp.ithome.com.tw/upload/images/20181022/20111449bTy6UDLKsm.png

而我們這次要介紹的是 Chrome 插件的版本,點選 Browser Extension 就會進入到下面的頁面,選擇 Chorme,再加入到擴充功能就好了。
https://ithelp.ithome.com.tw/upload/images/20181022/201114499TnIMTjMsk.png
也可以直接上 chrome 線上應用程式商店:
https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg

新增擴充功能後,就來測試看看,進入一個網站後,點一下擴充套件的 icon,就可以看到這個網站使用哪些套件。
https://ithelp.ithome.com.tw/upload/images/20181022/20111449XhXpEntn6d.png

再點一下 Wappalyzer 顯示的各種工具,更可以看到有哪些網站使用這個工具,這邊以點選 Google Analytics 為例:
https://ithelp.ithome.com.tw/upload/images/20181022/20111449JrO5FYrHqA.png

點選後就會看到有使用 Google Analytics 的網站,透過這個功能,你可以知道哪些技術或工具是被哪些知名網站使用了。
https://ithelp.ithome.com.tw/upload/images/20181022/20111449pvRhkzMLl5.png

而另外一個功能是點選工具後,會列出這類型工具被廣泛使用的比例是多少,以點選分析工具為例:
https://ithelp.ithome.com.tw/upload/images/20181022/20111449lFdJ0e8gQe.png

就會看到目前分析工具的市場分佈,明顯可以看到 Google Analytics 是佔非常高的比例。這個功能有很大的好處,就是你可以知道在某個方面,目前最多人使用的技術為何。
https://ithelp.ithome.com.tw/upload/images/20181022/20111449w78F5kG6ip.png

整理 Wappalyzer 好用的功能:

  1. 了解網站使用哪些技術與工具
  2. 找尋有使用某技術或工具的網站
  3. 了解某領域裡的技術或工具佔市場使用比例

HTML5 Outliner:網站架構檢視

現在的網頁為了吸睛,經常使用大量的動畫,或是使用絢麗的排版方式,卻也讓讀者可能找不到自己要的資訊,回到 HTML 5 的本質,其實它本身是有大綱的概念在,因此對於想在網站中找尋自己想要的資訊,HTML5 Outliner 就是相當好的工具。

那這篇是針對開發者的好用插件介紹,對於開發者,HTML5 Outliner 有什麼好處呢?那就是可以檢視自己的網站架構是否正確,開發網站時,正確使用 HTML 標籤可是很重要的呢!正確使用 HTML 標籤可以讓網頁架構語意化,而語意化的好處除了可以讓網站的架構更簡潔,對 seo 也是相當加分的。透過 HTML5 Outliner 就可以檢視自己的網站是否有正確的大綱架構。

一樣先找一個網站,點一下 icon,從 HTML5 Outliner 可以清楚看到整個網頁的架構,除了讓讀者可以更容易尋找資訊,開發網站者更能馬上了解自己的網站架構是否正確,如果有設定錨點,點一下 HTML5 Outliner 列表上的內容,網站就會直接跳到該區塊哦!
https://ithelp.ithome.com.tw/upload/images/20181022/20111449JFerjA0G94.png

Perfmap:圖片載入速度檢測

Perfmap Chrome Extension 連結:
https://chrome.google.com/webstore/detail/perfmap/hgpnhiajcdppfbogcpfdgcceepgkhdmk?hl=en

先找一個網址,點一下 icon,網站的圖片上就會出現性能熱力圖,目前 Perfmap 是只有針對圖片來做檢測,最下面可以看到比例尺,每一個圖片上的框框都有兩個數值,第一個數值表示的是該頁面顯示出這張圖片所花的時間,第二個數字是代表瀏覽器加載這張圖片所需要的時間。你也可以大致上透過顏色來看,綠色是加載速度快,到紅色則是加載速度較慢。
https://ithelp.ithome.com.tw/upload/images/20181022/20111449DZsZQViCdF.png

透過 Perfmap 可以知道哪些圖片載入需要比較久了時間, 如果圖片載入時間長,就會影響網頁效能,甚至會發生使用者已經進入網站了卻看不到圖片的囧境,所以了解圖片效能是很重要的!

了解了有哪些圖片需要被改善,那要怎麼改善呢?提供 5 個比較簡單的方法給大家參考:

  1. 選用合適的圖片大小,,確保圖片的「顯示」大小和圖片的「自然」大小是接近的。
  2. 儘量運用 CSS3 效果,例如:背景漸層,陰影。
  3. 較不需要細節的圖片,可以使用向量圖片,需要較多細節或包含許多不規則的圖形,就選用點陣圖片。
  4. 選擇正確的圖片格式,優先選擇通用的圖片格式:GIF、PNG、JPEG。
  5. 使用圖片優化工具,例如:tinypng。

Perfmap工具的作者也有發佈原始碼:https://github.com/zeman/perfmap ,有興趣的朋友可以研究研究!

PageSpeed Insights:檢測網站速度

PageSpeed Insights Chrome Extension:
https://chrome.google.com/webstore/detail/pagespeed-insights-with-p/lanlbpjbalfkflkhegagflkgcfklnbnh

PageSpeed Insights 是用來檢測網站速度的工具,它以網頁整體規劃來做評定與優化建議,分析的網址也會有手機版跟電腦版之分。

進入要分析的網站,點一下 icon 中的 Open
https://ithelp.ithome.com.tw/upload/images/20181022/20111449A7PMDMztrm.png

點 Open 之後,會跳出另一個網頁,等待分析後就會出現評定分數與最佳化建議,而手機版的結果和電腦版的結果也不相同。

這邊以手機版為例,簡單說明一下:
圖一中提到以 FCP 和 DCL 來作為評定, FCP(First Contentful Paint)是指當用戶進入網站可以感受到有內容的畫面時,會開始測量 FCP ; 而 DCL(DOM Content Loaded)則是測量載入 HTML 文檔的時間。
https://ithelp.ithome.com.tw/upload/images/20181022/201114495eKrlKAuSa.png

圖二則是提出網站最佳化的建議,例如:最佳化圖片、使用瀏覽器快取
https://ithelp.ithome.com.tw/upload/images/20181022/201114499Voi2iJoFk.png

提升網站速度有什麼用處呢?

  1. 網站速度提升對 seo 有影響,但網站速度也並非影響 seo 的唯一要件
  2. 減少網站主機的負擔
  3. 讓網站的運作與讀取更有效率,也會提升使用者體驗

雖然透過此類工具所分析出的網站速度與最佳化的建議,並非是影響網站效能好壞的唯一指標,但是透過這種方式仍是可以了解網站基本運作與讀取效率的好工具,大家也可以試著測試看看自己的網站拿到幾分哦~

WhatFont:查詢網站字體

WhatFont Chrome Extension:
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=zh-TW

當大家在瀏覽一個覺得不錯的網站時,可能都會遇到很多特別的字體,並想知道這些字是使用何種字體?通常我們會想起的第一個辦法,肯定是按下右鍵使用開發者工具 - 檢查,到原始碼裡面去尋找 font-family。如果你有這樣的經驗,那你一定要安裝 WhatFont,它是一款可以即時顯示網站中的字是使用何種字體,透過這個工具就不需要利用檢查慢慢的去原始碼裡面找,只要將游標放到字上就可以知道它的字體囉!

進入一個網站,點一下 icon,如果左上有出現 Exit WhatFont 就代表進入檢視字體的模式,將游標移到字體上就會出現該字體。
https://ithelp.ithome.com.tw/upload/images/20181022/20111449s9VNDypN4e.png

到網頁字體上按一下滑鼠左鍵,還可以看到更詳細的資訊,包括字體、寬高比例、字體大小、顏色及行距等等
https://ithelp.ithome.com.tw/upload/images/20181022/20111449GaGX8bnsI7.png

查詢完就點一下 Exit WhatFont 就可以離開字體檢視模式。

使用 WhatFont 的小提醒

  1. WhatFont 顯示的字體並非保證是正確的,可能會受到系統設定或預設設定及中英文字體分別等等的因素影響。
  2. 有一些使用圖片來顯示的文字,就無法正確辨識。

以上是前五個好用的擴充功能介紹!
透過這些工具,在開發上或是觀察好的作品時就可以更有效率了,是不是相當實用呢~
接下來還有五個要介紹給大家,讓我們繼續看下去!


上一篇
Markdown - 易編易讀,優雅的寫文吧!
下一篇
10 個好用的 Chrome 插件(下)
系列文
前端工具百寶箱 - 六角學院30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
scertgogo
iT邦新手 5 級 ‧ 2018-11-14 12:04:49

PageSpeed Insights:檢測網站速度
這個chrome dev tool有個內建的audits,免安裝外掛

我要留言

立即登入留言