Chrome開發者工具的11個高級使用技巧

本文作者從開發者角度出發,介紹了幾個關於 Chrome 開發者工具的高級用法。熟練使用這些高級用法可以大大地提高你的生產力。如果你選擇 Chrome 作爲開發環境,那麼你應該知道下面關於它的 11 個使用技巧。

圖片來源 Morning Brewon,Unsplash

好了,現在由於某種原因,你最終選擇了 Chrome 瀏覽器作爲開發及調試的環境。接下來,打開開發者工具並開始調試代碼。

很多時候你可以打開“控制檯”面板來檢查程序的輸出,或者打開“元素”面板來檢查 DOM 元素的 CSS 代碼。

但是你真的瞭解 Chrome 開發者工具嗎?實際上,它提供了許多強大但很多人未知的功能,可以極大地提高我們的開發效率。

在這裏,我將介紹幾個最有用的功能,希望能對你有所幫助。

在開始之前,我想介紹一下 Chrome 的命令菜單。命令菜單之於 Chrome,就像 Shell 之於 Linux 一樣。你可以在鍵盤敲入相應命令來操作 Chrome。

首先,我們打開 Chrome 開發者工具,然後使用以下快捷鍵打開命令菜單:

  • windows:Ctrl + Shift + P
  • macOS:Cmd + Shift + P

或者我們可以按照下圖所示的步驟將其打開:

然後,我們可以轉到“命令”面板,在這裏我們可以輸入一些命令來執行很多強大的功能。

原文鏈接:【https://www.infoq.cn/article/wRIy35uYH7jDQ49DuGhx】。未經作者許可,禁止轉載。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章