在文件中過濾一個函數(shù)或者是一個選擇器

你應該還想要更多功能，這樣就可以在一個文件中導航到（或者搜索到）特殊的 JavaScript 函數(shù)或者是 CSS 規(guī)則文件。

要導航到你選中的文件，進入源面板。然后你就可以使用下面的快捷鍵來打開一個對應函數(shù)/特定選擇器的一個選擇框：

• Ctrl + Shitf + O (Windows,Linux)
• Cmd + Shitf + O (Mac OS X)

基于選中文件的類型，你將會看見所有的 JavaScript 或者是 CSS 樣式定義。開始輸入你要搜索的函數(shù)名稱或者是 CSS 定義時就會過濾出一個列表的結(jié)果，或者是直接選擇一個結(jié)果，進入到定義這個內(nèi)容的文件中。

跳轉(zhuǎn)到指定行號

開發(fā)者工具同時也可以在編輯器中直接跳轉(zhuǎn)到指定行號。要啟動行號輸入框，只需要選中你要查找的文件，然后使用下面的快捷鍵來啟動：

• Ctrl + G (Windows)
• Cmd + L (Mac OS X)
• Ctrl + G (Linux)

實時編輯腳本和樣式

開發(fā)工具支持實時編輯腳本和樣式，不需要重新加載頁面就可以看到效果。這對于測試設計的更改，原生 JavaScript 函數(shù)或者代碼塊很有幫助。

腳本

JavaScript 可以直接在 Sources 面板中進行編輯。打開指定的腳本進行編輯，或者：

1. 在元素面板的視圖中點擊相應腳本的鏈接（例：\）
   
   

2. 或者從 Scources 子面板中選擇腳本的文件名：

這會在右邊的面板上顯示一個新的標簽，里面的源文件將會是語法高亮的。

對于腳本的更改只會在評估時間執(zhí)行，也就是說對代碼的修改不是在頁面加載后進行的話，將不會產(chǎn)生效果。修改后的代碼會在下一個階段執(zhí)行，比如鼠標滑過監(jiān)聽或者點擊事件的回調(diào)更改后可以快速進行測試。

獲取更多有關 JavaScript 在 Sources 面板進行調(diào)試的信息，請關聯(lián)閱讀在 JavaScript 排錯 文檔。同時也可以查看 在線編輯器上的短屏幕截取和斷點排錯。

提示：工作空間對于本地文件的持續(xù)編輯也是支持的。查看更多

樣式

下面有一個和編輯樣式類似的工作流。打開開發(fā)者工具，選擇元素面板。在右邊，一些子面板將會被顯示出來，其中就包括樣式面板。檢查在頁面上的某個元素將會在風格面板上顯示一組已經(jīng)被應用到當前節(jié)點的屬性，并且會按選擇器進行排序。

在 "element.style" 部分會顯示在頁面標記中通過樣式屬性設置的相關屬性。

下一個部分是 ”Matched CSS Rules“，這里會顯示匹配相應節(jié)點的選擇器，他們的屬性和值，甚至是其源文件名，以及讀取該樣式的行號。選擇器匹配的節(jié)點將會被設置為黑色，其他的將會顯示成灰色。這么做最大的好處就是在于我們在閱讀時可以更好的區(qū)分選擇器篩選出來的東西。

在一個子面板中改變?nèi)魏?CSS 屬性，比如一個元素的邊界和尺寸，將會將會立刻生效并且在主顯示窗口中顯示。

返回 ”Matched CSS Rules“ 面板，點擊在規(guī)則旁邊的樣式表的鏈接也可以引導你進入 "Sources" 面板。這會顯示完整的樣式表并且會直接定位到相關的 CSS 規(guī)則的行號處。

在這里，你可以向使用常規(guī)編輯器那樣更改文件，并且瀏覽器會實時顯示更改后的效果。

另存為

如果你對于做出的更改感到滿意，你可以保存文件。

為此，首先要確認你是否源面板下的文本編輯視圖中做出的更改：

或者是在 ”Element->Style panle“(for SASS/CSS）中點擊文件名稱（例如：style.css）。

接下來，右鍵點擊文件名或者直接點擊文本編輯器內(nèi)任意位置，然后選擇"Save As"。這將彈出一個允許你保存的菜單。

之后提交的更改（在同樣的菜單中保存的或者是使用 Ctrl/Cmd + S 快捷鍵）都會保存到同一個位置中。

本地修改

開發(fā)工具同樣維護了所有對本地文件做出的歷史修改。如果你已經(jīng)編輯了一段腳本或者樣式表并且使用了開發(fā)工具進行保存，你可以在 Sources 右鍵一個文件名（或者在 source 區(qū)域）然后選擇 ”Local modifications“ 來查看歷史記錄。

一個本地修改面板將會顯示：

• 不同的更改
• 更改文件的時間
• 被修改文件所在的域名

此外還有一些鏈接。revert 會將文件上所有的更改回復到它原始的狀態(tài)，并且移除更改歷史。

Apply original content 將有效地重復同一操作，但是會維護視圖中的修改歷史，以免你希望回溯到某個特定更改后。

最終，apply version content 將會應用全部更改，并提供時間集上的特定修改記錄。

自定義 JavaScript 片段

有時候你想能夠保存小的腳本，書簽和實用的工具好讓這些工具可以讓你在調(diào)試的時候可以用的上。Snippets 是一個新的可以在這個開發(fā)流程中使用的開發(fā)者工具，它允許你在源面板中創(chuàng)建，存儲和執(zhí)行 JavaScript?，F(xiàn)在可以在Chrome Canary 中獲取。

以下是 Snippets 比較有用的情況：

• 書簽 所有你的書簽可以作為片段進行存儲，特別是那些你可能想編輯的。
• 實用工具 調(diào)試工具可以和當前頁面進行交互，并且可以保存和調(diào)試。一個社區(qū)企劃的列表已經(jīng)被提供。
• Debugging Snippets 提供了一個語法高亮顯示并且可持續(xù)的多行控制臺，這樣使得調(diào)試代碼比單行要更加便捷。
• Monkey-patching code 你想要在運行時修復的代碼可以通過 Snipptes 來完成，盡管多數(shù)時候你可能只是在源面板中實時編輯代碼。

Brian Grinstead 提供了一個存放有用 Snippets 給開發(fā)者的地方，就在 bgrins.github.io/devtools-snippets

開始

用 Snippets 開始，導航到 Sources 面板。如果你沒有做出任何改動，你將會看到默認的布局，就像下面一樣：

點擊在上面左邊角落的切換鍵可以顯示展開后的面板。這里你應該已經(jīng)看見了 Sources，Content scripts 和一個新的標簽，Snippets。點擊它然后進入 Snippets。

創(chuàng)建 Snippets

Snippets 通過兩個面板來工作。左側(cè)的面板（與 Sources 相似）是文件列表，選擇一個 snippets 文件將會在右邊的編輯器中打開它。這和你在源面板中選中腳本或者樣式表是類似的。

在文件列表中右鍵點擊并選擇 "New" 會創(chuàng)建一個新的 snippet 文件。

Snippet 文件名稱

Snippet 文件名稱是被自動創(chuàng)建的，但是當 snippets 文件創(chuàng)建之后，你同樣也可以自行更改文件名。

這之后只要想再次更改文件名，只需在文件列表中再次右鍵，選中 “Rename”。如果你需要的話也可以選擇 “Remove” 。

編輯和執(zhí)行 Snippets

從文件列表中選擇一個 Snippets 文件，然后在你的右側(cè)的編輯器中打開。這里你可以寫或者粘貼任何 JavaScript 代碼（換句話說就是你的 Snippet），包括函數(shù)和表達式。

如果一個文件名以 * 結(jié)尾，那么就意味著這個文件已經(jīng)被修改，但是沒有保存。

要執(zhí)行這個 Snippet，在文件列表上右鍵在該文件，然后選擇 ”Run“。或者你可以點擊 *Run（>）* 按鈕。

如果這個 snippet 會有控制臺輸出，編輯器下的控制臺會輸出相關內(nèi)容。

注意：使用鍵盤快捷鍵也可以執(zhí)行一個 snippet-選中你的 snippet ，之后使用 Ctr / Cmd + Enter 來運行它。這和使用 Run（>）按鈕的行為是一樣的-當前僅僅在 Source 控制臺，但是之后將會跳轉(zhuǎn)到到 debugger 控制臺。

如果你想在控制臺中，執(zhí)行 snippet 的一些特殊行中的代碼，你可以在編輯器中選中這些代碼，然后右鍵，選擇 "Evaluate in Console" 選項來進行執(zhí)行。鍵盤上的快捷鍵是 Ctrl + Shift + E。

選中 Run 后，輸出的表達式將會在編輯器下方的控制臺中輸出。

本地修改

對于每一個 Source，Snippet 也支持瀏覽本地更改并回滾到一個特定時間點的更改。

保存更改后在編輯器中右鍵，然后選擇 “Local modifications” 就可以使用該功能。

斷點，觀察表達式以及更多功能

其他你在 Sources 面板中使用的功能，比如添加觀察表達式，斷點，收起變量和保存文件同樣也可以在 Snippet 中使用。

請閱讀 Sources 面板這一章來了解更多關于這些功能的更多內(nèi)容。

保存 Snippets

Snippets 可以被保存并且之后依舊能夠通過開發(fā)者工具中的 Snippets 選項卡來使用，或者直接導出一個新的文件。在文本編輯中右鍵打開編輯菜單以獲取 Snippet 的保存選項。

Save 會將變更保存到已有的 Snippets 文件中，而 Save As 將會允許你將這個 Snippets 保存到新的文件路徑中。

注意：Snippets 保存在開發(fā)者工具的本地存儲中。當使用 Sava/Save As的時候，你可以將這個 Snippets 綁定到任何位置的文件中，就像保存其他腳本一樣。

Snippets 導航

就像在 Sources 中的腳本和樣式表一樣，Snippets 也可以使用我們之前提到的相應的鍵盤快捷鍵，比如導航到特定的 Snippets 文件，函數(shù)，或者行號。