Chrome開發者工具不完全指南(六 外掛程式篇)

2022-03-04 19:13:19 字數 2322 閱讀 8213

本篇是chrome開發者工具的結尾篇,最後為大家介紹幾款功能強大的外掛程式。在chrome商店裡面有很多外掛程式,沒事建議大家去逛逛。不過需要fq,所以諸位請自備神器。

一、**外掛程式

高達上的**就是這樣出來滴。據說還有許多方式可以更改,不過露珠目前就用的事這種方式。有興趣的同學可以去試試看。

二、performance-analyser(網頁效能分析)

你可以利用這款外掛程式來分析你的介面資源載入的整體情況,並試著做一些優化和調整。

三、(fehelper)web前端助手

這款外掛程式包括了一系列功能,很豐富。是國人開發的,功能包括:json格式化,html格式化,***生成,編碼規範檢測等等不一而足。當你在瀏覽器中開啟乙個後台介面的時候,如果該介面返回的是json字串,那麼它會自動將其格式化。下面是它的一些功能列表,不具體一一示範:

四、postman

該外掛程式是模擬傳送請求的,後台和前台開發人員都可以用到。它是乙個簡化版的fiddler,功能雖然沒有它強大,但是介面勝之,操作性也勝之,還有規範的api,更新也一直在繼續。所以用之有木有:

五、visual event

網頁事件監聽,能幫你捕獲到目前網頁上的各個元素的事件監聽狀況。開啟乙個介面,按下擴充套件按鈕:

把滑鼠放到有背景色的元素上去,可以看到它們的時間**和繫結的函式。對於一些簡單的事件檢測還是蠻有用的。比較複雜的就沒什麼卵用了。

六、***掃瞄

這個功能對手機開發來說還是不錯的。掃一掃就在瀏覽器中開啟了。在ff瀏覽器中自帶的功能,對於chrome來說怎麼可以木有呢?不過這功能太簡單,太低檔次,太多了(不過很有用)。就不上圖了。

七、whatfont

找到網頁的字型。開啟功能後把滑鼠停留在文字上,會彈出該字型名稱。所以你可以所以copy你喜歡的字型啦。

八、speed tracer

這個是乙個強大版本的效能分析器,比profiles還強大。可以跟蹤事件,檢視css樣式,找到js中記憶體洩露,檢測js語法。功能之強大,無出其右!speed tracer是一款很強大的網頁效能分析工具,通過它你可以找到你的網頁執行緩慢的原因。針對它們改善**。不過因為它的功能強大,所以操作比較複雜。篇幅原因露珠不做介紹。感興趣的同學可以自己去捉摸捉摸。下面是盜圖一張:

結束語、

到此為止,露珠的chrome開發者工具不完全指南系列宣告結束,露珠通過了六篇博文,向諸位比較想盡地介紹了chrome開發者工具的功能使用。從基礎的dom查詢到效能分析,大體上涵括了前端開發的各個方面。在如今前端開發日益複雜的趨勢下,掌握了幾件好的工具,是可以能夠事半功倍的。而chrome毫無疑問的是這些好工具中的乙個。講到這裡露珠想到《莊子》裡面的乙個故事:有一天孔子的學生子貢經過一塊菜畦,看到有一位老者為了澆水而打了一條通向水井的地道,然後抱著水甕來回於水井和菜畦之間,為的是給菜畦澆水。子貢見了就對老者說這樣打水太累,為什麼不自己做乙個打水的機器呢?種菜的老人說:「有機械之事者必有機心。機心存與胸,大道不載也」。意思是有了偷懶的心,人就變得懶,這不是人的本性,也不是天的本性,所以大道也就不會充實他的心田。其實露珠想說運用工具和偷懶或機心是兩回事兒,時代在變遷,人類早就不再是刀耕火種的人類了,如果一直停在舊的時代,跟不到新時代的進步,不學會與時俱進這樣只有被歷史淘汰。這跟我們現在處的環境是一樣的,特別是前端開發,技術更新跟翻書一樣快,隔三差五的新框架出現,幾年的時間就有一大堆新鮮的東西跳將出來把你們嚇一跳,不僅僅開發的時間在增加,學習的成本也在不停增加,所以時間變得尤其寶貴。如果有好的工具可以在少付出的情況下為我們達到同樣的目的,何樂而不為呢?畢竟大家的目標都一樣,只是殊途同歸罷了。當然,莊子是道家人物,借個故事來調侃儒家也是理所當然,斷章取義還是不行滴哈。

Chrome開發者工具使用

elements 元素 允許我們從瀏覽器的角度看頁面,也就是說我們可以看到chrome渲染頁面所需要的的html css和dom document object model 物件。此外,還可以編輯這些內容更改頁面顯示效果。console 控制台 顯示各種警告與錯誤資訊,並且提供了shell用來和文件...

巧用chrome開發者工具

說明 截圖中的chrome版本為52,不同版本可能略有區別。開發時消除靜態資源快取不能立刻更新的困擾,勾選disable cache即可 切換顏色顯示格式 修改預設顏色顯示格式,在settings 控制台按f1 preferences elements color format 快速選中dom節點,...

Chrome開發者工具面板

network面板可以記錄頁面上的網路請求的詳情資訊,從發起網頁頁面請求request後分析http請求後得到的各個請求資源資訊 包括狀態 資源型別 大小 所用時間 request和response等 可以根據這個進行網路效能優化。我把google官方 上介紹network面板的圖貼到這裡,該面板主...