Chrome開(kāi)發(fā)工具 開(kāi)發(fā)工作流程

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

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

要導(dǎo)航到你選中的文件，進(jìn)入源面板。然后你就可以使用下面的快捷鍵來(lái)打開(kāi)一個(gè)對(duì)應(yīng)函數(shù)/特定選擇器的一個(gè)選擇框：

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

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

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

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

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

實(shí)時(shí)編輯腳本和樣式

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

腳本

JavaScript 可以直接在 Sources 面板中進(jìn)行編輯。打開(kāi)指定的腳本進(jìn)行編輯，或者：

1. 在元素面板的視圖中點(diǎn)擊相應(yīng)腳本的鏈接（例：\）
   
   

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

這會(huì)在右邊的面板上顯示一個(gè)新的標(biāo)簽，里面的源文件將會(huì)是語(yǔ)法高亮的。

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

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

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

樣式

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

在 "element.style" 部分會(huì)顯示在頁(yè)面標(biāo)記中通過(guò)樣式屬性設(shè)置的相關(guān)屬性。

下一個(gè)部分是 ”Matched CSS Rules“，這里會(huì)顯示匹配相應(yīng)節(jié)點(diǎn)的選擇器，他們的屬性和值，甚至是其源文件名，以及讀取該樣式的行號(hào)。選擇器匹配的節(jié)點(diǎn)將會(huì)被設(shè)置為黑色，其他的將會(huì)顯示成灰色。這么做最大的好處就是在于我們?cè)陂喿x時(shí)可以更好的區(qū)分選擇器篩選出來(lái)的東西。

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

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

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

另存為

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

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

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

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

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

本地修改

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

一個(gè)本地修改面板將會(huì)顯示：

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

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

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

最終，apply version content 將會(huì)應(yīng)用全部更改，并提供時(shí)間集上的特定修改記錄。

自定義 JavaScript 片段

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

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

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

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

開(kāi)始

用 Snippets 開(kāi)始，導(dǎo)航到 Sources 面板。如果你沒(méi)有做出任何改動(dòng)，你將會(huì)看到默認(rèn)的布局，就像下面一樣：

點(diǎn)擊在上面左邊角落的切換鍵可以顯示展開(kāi)后的面板。這里你應(yīng)該已經(jīng)看見(jiàn)了 Sources，Content scripts 和一個(gè)新的標(biāo)簽，Snippets。點(diǎn)擊它然后進(jìn)入 Snippets。

創(chuàng)建 Snippets

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

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

Snippet 文件名稱(chēng)

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

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

編輯和執(zhí)行 Snippets

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

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

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

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

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

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

選中 Run 后，輸出的表達(dá)式將會(huì)在編輯器下方的控制臺(tái)中輸出。

本地修改

對(duì)于每一個(gè) Source，Snippet 也支持瀏覽本地更改并回滾到一個(gè)特定時(shí)間點(diǎn)的更改。

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

斷點(diǎn)，觀察表達(dá)式以及更多功能

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

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

保存 Snippets

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

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

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

Snippets 導(dǎo)航

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