bbin电子游戏开户

為什么你現在應該開始使用Chrome開發工具

2019.04.15 Chrome開發工具

62

擁有一套方便的工具來幫助測試您的網站對于開發人員來說是必不可少的。最好的地方放在哪里?當然是在你的瀏覽器里!谷歌流行的瀏覽器Chrome內置了開發者工具。這是一組用于網頁創作和調試的工具。這,這個,那,那個Chrome開發工具(被稱為DevTools)允許開發人員訪問Web瀏覽器和Web應用程序的內部工作。

Chrome開發工具

使用ChromeDevTools,您可以知道所使用的樣式、圖像大小、所使用的腳本等。您可以調試并知道頁面上存在哪些錯誤。你甚至可以切換樣式或關閉,或完全改變它們,看看它對你的網站有什么影響。

在你的瀏覽器里

工具本身很容易得到。這里有三種打開它們的方法:

  1. 在Chrome瀏覽器中-選擇Chrome菜單(右上角的三個水平條),選擇更多工具,然后選擇DeveloperTools。

  2. 右鍵單擊任何頁面上的元素并選擇“檢查元素”。

  3. 在Windows鍵盤上選擇ctrl+Shift+i。在Mac上選擇CMND+OPT+I。

其中任何一個都會打開瀏覽器底部的DevTools窗口。

主窗口

這些工具出現在屏幕的底部。您將看到一個主窗口,頂部有菜單,默認視圖是元素,而默認選擇則是帶有菜單和樣式的輔助窗口。

這些工具被分組為任務。有8個組,包括元素、網絡、源、時間線、概要、資源、審核和控制臺。

元素

在這里,您可以看到頁面的HTML結構。HTML和Body的底部有一個切換鍵。您可以在任何元素上鼠標查看每個元素的詳細信息。

您可以單擊箭頭來打開和關閉主元素的內容,以使它們更易于閱讀。因此,您可以關閉正文,只需讀取標題,選擇要查看的標題中的元素,等等。這是一個極好的工具,查看您的網站的HTML。

網絡

這顯示了將要加載的每個元素,它們是如何加載的,文件的類型,文件的大小,加載所需的時間,以及在頁面加載序列中何時加載的時間線。這可以用于解決網絡問題,例如頁面加載中的瓶頸和糟糕的請求。

例如,如果您看到了大量404錯誤,您可以更仔細地查看問題所在。也許你已經下載了一個頁面,它的流量仍然很大,或者有人輸入了錯誤的鏈接。

來源

這顯示了將要加載的腳本和代碼片段以及它們的來源。

時間線

這顯示了每個資源加載的時間。您可以看到什么花費最多的時間,這有助于減少您的頁面加載。

剖面圖

這顯示了每個元素的內存使用情況。這對于向您展示哪些代碼需要優化是很好的。

資源

在這里,您可以檢查加載的資源。您可以查看cookie、應用程序緩存、HTML 5數據庫等。

審計

這允許您分析頁面。您可以在加載或加載之后進行審計。

審計現狀

首先,我選擇運行審計現狀。這將在站點當前的位置運行審核,該站點已經加載到我的瀏覽器中。

它給了我一張物品清單,根據它們的重要性給它們加上顏色,并顯示問題的數量。我可以通過點擊它們看到更多的細節。

我已經擴展了其中的幾個,以查看關于每一個的詳細信息。它給了我關于網絡使用和網頁性能的信息。它為我提供了如何解決這些問題的建議,并為我確定了它們的輕重緩急。

重裝頁面與負載審核

我回去了,選擇了在載貨時進行審計。結果相似,但正如預期的那樣,在加載頁面時會出現比加載頁面更多的問題。

在這兩者之間,我得到了關于JavaScript、瀏覽器緩存、代理緩存、cookie大小、從無炊事域提供內容、圖像尺寸、腳本的順序和樣式、將CSS放置在文檔頭部、刪除未使用的CSS riles以及使用普通CSS屬性名稱的信息。當然,結果會因網站而異。

這些信息不如速度洞察,但這足以讓我開始,我喜歡它被內置到我正在使用的工具的方便。我建議您每次更改站點時都運行它。它太容易使用,不能不使用它。

控制臺

這是JavaScript控制臺,您可以在這里測試頁面和應用程序。您可以調試腳本,并獲得有關要進行哪些更改的建議。控制臺允許您輸入命令,以便可以與網頁進行交互。它將記錄診斷信息以幫助您進行調試。您可以在主屏幕或抽屜(主屏幕下的窗口)使用它。

您可以使用控制臺或命令行API的。您可以寫入控制臺,格式化元素和樣式輸出,測量執行或加載時間,查看和標記時間線,計數語句,設置斷點,計算表達式,監視事件,堆棧消息,查看錯誤和警告,等等。

這是一個強大的工具,但使用它有很多。幸運的是,很好參比物質提供了有關如何使用它的示例。

調試

在Windows中選擇ctrl+p或在Mac上選擇cmd+p將打開調試屏幕,在那里可以選擇要調試的腳本。該工具為您提供了您希望在任何編程環境中看到的調試功能:暫停、繼續、逐步進入、跨步、斷點、格式化代碼等等。

細部幫助文件提供這些信息,以逐步使用調試模式。

CSS樣式窗口

最右邊的框包含所有CSS信息。當您選擇一個元素時,右側的“樣式”窗口將顯示元素的樣式信息。這部分很有趣。有五組工具:樣式、計算、事件偵聽器、DOM斷點和屬性。

風格

您可以選擇樣式并在此窗口中手動更改它們。例如,您可以選擇字體大小和顏色。

選擇字體大小并輸入您自己的大小。這樣做時,所選字體的字體大小將在屏幕上更改。

在字體顏色上進行選擇將打開顏色選擇器。選擇您想要的顏色,然后按回車。您將看到所選字體更改為新顏色。這是一個很好的方法來嘗試新的字體樣式,大小和顏色。

如果您單擊右側的site.css,您將打開一個包含詳細信息的較大窗口。在這里,您可以鍵入要使用的字體的名稱、指定顏色、指定大小等。

計算值

這顯示了框大小(以像素為單位)。它有填充、邊框和邊距。

設備模式

在放大鏡和看起來像移動設備的元素菜單之間左邊有一個小按鈕。你猜怎么著?這是一種移動設備。這是設備仿真模式。這是一個很好的方式,看看你的網站是如何反應。

裝置

比僅僅是移動設備更酷的是,你可以選擇它是哪一種移動設備,然后你就可以看到這個網站,就好像你在那個設備上看它一樣。太棒了!

我選擇了亞馬遜KindleFire HDX 7“,屏幕模仿了這個設備,這樣我就可以看到這個站點在屏幕上的樣子和觸摸的工作方式。

您可以通過點擊交換維度按鈕來改變屏幕的方向。

這是一個很好的方式來看看你的WordPress網站是什么樣子在較小的移動屏幕。我選擇了iPhone 6,屏幕大小與新的屏幕大小和分辨率相匹配。有許多設備可查看。還可以通過拖動兩側以增加或縮小大小來查看自定義大小。

網絡

也有一個選擇來選擇您要訪問該站點的網絡類型。這使您可以通過各種連接類型和速度查看您的網站的性能。您可以測試從50 Kbps GPRS到30 Mbps WiFi的幾個速度,以及幾個2G、3G和4G連接速度。這是一個很好的方式來測試你的網站的速度通過各種網絡,并獲得什么改進的洞察力。

媒體查詢

左上角有一個小按鈕,看起來像樓梯。它在網站窗口上方打開另一段屏幕,顯示不同的像素寬度。點擊它們,移動屏幕就可以達到這個大小。他們給你看:

  • 針對最大寬度的查詢

  • 范圍內的寬度

  • 針對最小寬度的查詢

這有助于您調整樣式和媒體內容,以便進行完全響應的設計。

抽屜

主屏幕下還有一個叫做抽屜的工具。這一補充如下:

控制臺-這是與主窗口相同的控制臺。通過將它放在這里,您可以將它與主窗口中的任何工具一起使用。

搜索-允許您搜索來源。

仿真-您可以選擇設備(在這里您可以選擇型號、分辨率、網絡等)、媒體、網絡(吞吐量和用戶代理)和傳感器(觸摸屏、加速度計等)。

渲染-顯示油漆矩形、復合圖層邊框、FPS表、連續頁面重繪和潛在的滾動瓶頸。

設置及更多

右邊的菜單欄會告訴你網站上的錯誤和警告的數量,允許你隱藏底部的抽屜,讓你調整設置,并將工具停靠到主窗口(在你的網站和DevTools之間創建一個分割屏幕)。

有大量的設置,您可以調整,以便您可以修改工具的工作方式,您需要他們。

鉻金絲雀

如果你真的想站在谷歌ChromeDevTools的邊緣,那就試試ChromeCanary吧。它的圖標是黃色的。明白了嗎?它需要一件斗篷。這是谷歌最新的,也是最棒的。它是為開發人員設計的,并有最新版本的DevTools。它還不夠穩定,不適合一般使用,所以它可能會破壞您的系統。

如果當你的系統崩潰時,你很容易對你的環境造成嚴重的破壞,那么看看上面圖片中的ChromeCanary圖標,不要眨眼5秒。

現在你可以繼續下去了。你不會記得這部分的。

包起來

GoogleChrome的開發工具是一個很好的工具,用于故障排除、提高網絡性能、查看不同屏幕大小和分辨率的站點,以及獲取站點需要改進的信息。有很多特性,您可以通過以下方式添加更多功能擴展。這些工具本身就是安裝GoogleChrome的一個很好的理由,即使它不是您的主要瀏覽器。花點時間學習這些功能會有回報的,你的網站和訪問者會為此感謝你。

輪到你了!你使用Chrome開發工具嗎?我有沒有遺漏你最喜歡的功能?你有什么要補充的嗎?我想在下面的評論中聽到這一點!


關鍵詞

最新案例

聯系電話 400-6065-301

微信咨詢 寒總監

bbin电子游戏开户 时时彩预测免费软件 全天重庆彩新一代计划 雪缘园即时比分 幸运飞艇三把期必中技巧 BETVICTOR伟德与官网 最新时时送金 北京pk10 3-8定位技巧 哪个游戏平台有21点 重庆时时彩网 pt电子游戏电 pk10赛车冷热号码怎么找 网上棋牌赌博送10元 吉林时时票开奖号码查询今天 北京pk10是正规彩票么