在Chrome檢查器開發人員工具（“檢查器樣式表”）中添加新的空白樣式表的最快方法

Question

通常，當我想在Chrome中實時測試CSS修改時，會使用：

• 右鍵單擊>檢查

• 使用右下方的面板，並使用+按鈕添加新類，然后在此處進行編輯。

  

但我注意到，還有一種更簡便的方法：打開“檢查器樣式表”，該樣式表打開一個空白CSS文檔，可以對其進行編輯，並實時顯示修改內容：

問題： 在Google Chrome瀏覽器中打開這種“檢查器樣式表”的最簡單/最快的方法是什么？

（以最快的速度，我的意思是比右鍵單擊，檢查， +添加新類，單擊小檢查器樣式表鏈接等快）。

我無法在Chrome的控制台/開發者工具菜單中找到它。 是否有鍵盤快捷鍵可以打開這樣的“檢查器樣式表”？

Answer 1

我沒有一個簡單的捷徑，但是我可以讓您更快地到達那里：

1. F12打開DevTools。
2. 單擊“ 元素”選項卡上“樣式”面板頂部的按鈕，以創建檢查器樣式表。
3. 雙擊 打開。

---

創建檢查器樣式表后，我將其關閉或關閉DevTools，如何再次找到它？

• 如果在檢查器樣式表仍處於打開狀態時關閉了DevTools，只需直接轉到“ 源”選項卡（在DevTools的頂部欄中），並且檢查器樣式表仍應處於打開狀態。
• 如果您已關閉檢查器樣式表本身，那么在“ 源”選項卡上，按Ctrl + P並鍵入“ inspector-stylesheet” ，通常在“ in ...”之后，您將已經在頂部看到檢查器樣式表可用文件的建議列表。
  而且，它在您第一次創建它的“ 元素”選項卡上的“樣式”面板頂部也應該仍然可見。