文檔創(chuàng)作
- 為開發(fā)工具提供文檔來源的是 GitHub 上的貢獻(xiàn),并且總是受歡迎的。參考和教程指南受益于您的幫助。
- 聯(lián)系 @paul_irish 的更多信息，你可以幫助在這里。
分享你所學(xué)到的
- 通過 GIF，Vines 或注釋分享你學(xué)到的知識
- 覆蓋新的實(shí)驗(yàn)特性
- 改進(jìn)設(shè)計(jì)的所有部分的 UX 工具
- 分析和管理問題
- 檢查特征或錯誤
新的實(shí)驗(yàn)功能覆蓋率
- 訂閱 devtools-reviews@chromium.org 中所有評論待編碼的郵件列表
- 訂閱的 RSS 反饋工具。
- 按照 @chromedevtools 和 @在推特包括反饋計(jì)工具
- 有足夠的行動和開發(fā)人員都急于知悉的更新的內(nèi)容
對于所有部件改進(jìn)的 UX 設(shè)計(jì)工具
- 你的設(shè)計(jì)想法在 UX 很受歡迎。
問題分析與管理
- 查看所有打開的工具項(xiàng)目。在適當(dāng)?shù)臅r候要求減少或?yàn)樗麄冏约禾峁?
檢查特征或錯誤
- JavaScript 的代碼庫和設(shè)置向?qū)Э梢宰屇憧焖偃腴T

保持更新

開發(fā)工具團(tuán)隊(duì)將會從使用該工具的開發(fā)者那里獲取反饋。如果你想保持更新，你可以訂閱在 crbug 下面的頻道。請記住標(biāo)記那些對你也有影響的問題。最后，不要忘記提交的功能請求或你找到的調(diào)試報告。不僅是關(guān)于開發(fā)者工具的，整個 Chrome 的信息都對我們有用。

Cr-Platform-DevTools Cr-Platform-DevTools-HTML Cr-Platform-DevTools-Memory Cr-Platform-DevTools-Mobile Cr-Platform-DevTools-Performance Cr-Platform-DevTools-UX

對開發(fā)者工具源代碼的貢獻(xiàn)

Chrome 開發(fā)工具實(shí)際上是用 JavaScript 和 CSS 編寫的應(yīng)用。如果你熟悉這些技術(shù)，你就知道如何寫一個補(bǔ)丁。一些人已經(jīng)這樣做了，于是有了顏色選擇器，文件選擇器等功能，這些都是由和你一樣的開發(fā)者貢獻(xiàn)的。

IRC 頻道中：#Chrome 開發(fā)工具

我們現(xiàn)在正在重新編寫這份向?qū)?。如果你想跟著已?jīng)完成的早期工作繼續(xù)幫助我們，請閱讀 DevTools Contributing(draft) 上的評論

Step 1: 開始

要開始為開發(fā)工具做出貢獻(xiàn)，你需要注意以下幾件事：

獲取代碼

通過克隆 git 的庫 Blink 進(jìn)行源代碼下載。這個過程可以在 30 - 60 分鐘（取決于你的連接）。

git clone https://chromium.googlesource.com/chromium/blink.git

安裝 Canary

當(dāng) Blink 下載后，在 Mac OS/Windows 系統(tǒng)上安裝 Canary 或下載最新的瀏覽器

DevTools 前端服務(wù)

運(yùn)行本地服務(wù)器器。本地 Web 服務(wù)器將服務(wù)從某些端口（如 8000）來運(yùn)行來自 blink/Source/devtools 目錄下的文件。

當(dāng) Blink 庫已經(jīng)準(zhǔn)備好厚，進(jìn)入 devtools 文件夾：

cd blink/Source/devtools

從那里你可以使用以下命令在 8000 端口運(yùn)行一個本地服務(wù)器：

python -m SimpleHTTPServer

然后，用你喜歡的瀏覽器打開 http://8000/front_end/inspector.html 就可以開始調(diào)試了！

為什么服務(wù)器需要從開發(fā)工具目錄下運(yùn)行？

當(dāng)遠(yuǎn)程調(diào)試和開發(fā)前端的 Blink 時，InspectorBackengCommands.js 文件是基于 protocal.json 文件的內(nèi)容生成的，而不是基于 Chromium 構(gòu)建系統(tǒng)時的反饋。protocol.json 文件放在 /devtools 目錄下 front_end 文件夾的父文件夾中。這就是為什么你需要在 devtools 目錄下運(yùn)行 Web 服務(wù)器。

注意：如果你已經(jīng)檢查過整個 Chromium 源，你將需要從 /src/third_party/WebKit/Source/devtools 目錄來運(yùn)行 web 服務(wù)器。

如果你的功能需要對后端代碼進(jìn)行修改，那么你一定要去校驗(yàn)和生成 Chromium。否則，你只需要安裝一個前端文件的網(wǎng)絡(luò)服務(wù)器，并使用遠(yuǎn)程調(diào)試選項(xiàng)運(yùn)行瀏覽器。

注： protocol.json 文件描述了前端和后端之間的 API。它在前端和后端的建設(shè)階段會生成 API 存根。當(dāng)遠(yuǎn)程調(diào)試的 API 的前端時，inspectorbackendcommands.js 是由前端代碼生成的。欲了解更多信息，閱讀 Chromium How-tos.。

Step 2: 運(yùn)行 Chromium 的一個邊緣構(gòu)件

要開始，需要得到一個 Chromium 的 edge-build。這些都是可用于所有平臺。

在運(yùn)行 Chromium 時，需要一對命令行標(biāo)記（或開關(guān)）。

使用標(biāo)記來運(yùn)行 Canary：

在 Windows 上

右鍵點(diǎn)擊你的“谷歌瀏覽器”圖標(biāo)
選擇屬性，并將命令行標(biāo)記到目標(biāo)區(qū)域的結(jié)尾部分。

舉個例子:

"C:\Users\%username%\AppData\Local\Google\Chrome SxS\Application\chrome.exe" --remote-debugging-port=9222 --no-first-run --user-data-dir=C:\Users\%username%\chrome-dev-profile http://localhost:9222#http://localhost:8000/front_end/inspector.html

在 OS X 上

在終端里，在程序目錄結(jié)尾添加標(biāo)記來運(yùn)行 Canary。

/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --remote-debugging-port=9222 --no-first-run --user-data-dir=~/temp/chrome-dev-profile http://localhost:9222#http://localhost:8000/front_end/inspector.html

Note: 就像上面一樣，你要在任何的一個空格前加一個斜線 "\"。

在 Linux 上

在 chromium-browswer 命令后面加上標(biāo)記來運(yùn)行它：

chromium-browser --remote-debugging-port=9222 --no-first-run --user-data-dir=~/temp/chrome-dev-profile http://localhost:9222#http://localhost:8000/front_end/inspector.html

這些開關(guān)用于做什么？

--user-data-dir=~/temp/chrome-dev-profile
用于說明瀏覽器將在哪里查看其全部狀態(tài)。這可以是正在運(yùn)行的服務(wù)器上的一個相對路徑。這可以指向任何地方。你可以隨時清除你的個人資料。
--remote-debugging-port=9222
啟用特殊端口上的 HTTP 遠(yuǎn)程調(diào)試，這個端口就是 localhost 所對應(yīng)的端口。
--no-first-run
跳過第一次運(yùn)行任務(wù)，不管它實(shí)際上是不是第一次運(yùn)行。
http://localhost:9222#http://localhost:8000/front_end/inspector.html
我們加載了 9222 端口上的監(jiān)視表，但我們將開發(fā)工具指定到前端的一個哈希 URL 上：http://localhost:9222#。因?yàn)槲覀儗?DevTools 前端加載到 8000 端口，所以我們想將那個端口匹配到這里。假設(shè)您的 Web 服務(wù)器是從源目錄運(yùn)行的，則其路徑應(yīng)該指向 inspector.html 的有效路徑。之前的 ——remote-debugging-frontend 標(biāo)志則不再使用。

這些標(biāo)志使得 Chrome 允許 WebSocket 連接到 localhost：9222 并且能夠從本地 git repo 運(yùn)行前端 UI。這里有一個命令行開關(guān)的完整列表和它們的作用。

Step 3: 建立檢查

如果你沒有使用開發(fā)工具，檢查工具的最簡單方法是從你的標(biāo)簽移除它們，這樣它就會在一個獨(dú)立的窗口顯示。然后點(diǎn)擊你的鍵盤快捷鍵開啟監(jiān)視（如 cmd-alt-i）。這會開啟一個新的開發(fā)工具窗口來監(jiān)視之前的內(nèi)容。你也可以按照自己的想法來調(diào)整這些窗口。

一旦打開 Canary，就會打開一個新標(biāo)簽，之后可以瀏覽任何網(wǎng)頁，像 chromium.org。

接下來，回到“可視頁面”選項(xiàng)卡，http://localhost:9222

在這里您將看到關(guān)于每一個被監(jiān)視頁面的網(wǎng)格菜單。刷新后可以更新數(shù)據(jù)。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/contributing-image01.png" alt="image00" />

這個網(wǎng)格菜單是的一個小型網(wǎng)絡(luò)服務(wù)器端運(yùn)行的，該服務(wù)器在 Canary 的第一個實(shí)例內(nèi)，而 --remote-debugging-port=9222 參數(shù)會傳遞給該對象。自從Web服務(wù)器從您本地的 /blink/Source/devtools 目錄下的 git repo 運(yùn)行時，當(dāng)點(diǎn)擊相關(guān)頁面時，devtools 文件夾下的全部文件都會被檢查。

點(diǎn)擊你打開的標(biāo)簽的縮略圖。你將會有一個完整的選項(xiàng)卡用于檢查其他的選項(xiàng)卡。

很好的工作，到目前為止！

注意，這個工具實(shí)例中指向 http://localhost:8000/front_end/inspector.html 的 URL。這是因?yàn)楸O(jiān)控 URL 的http://localhost:9222#http://localhost:8000/front_end/inspector.html 是作為一個哈希傳給“監(jiān)視頁面” URL 的。它通過 websocket 連接到你本地的倉庫，你可能會注意到，它是 URL ?ws=localhost:9222/devtools/ 的一部分。（你也可以使用工具來看看這個 WebSocket 幀數(shù)據(jù)）。接下來繼續(xù)進(jìn)行...

現(xiàn)在，用你的鍵盤快捷鍵在窗口中打開工具。你現(xiàn)在已經(jīng)成功建立檢查器了。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/contributing-image00_1.png" alt="image01" />

做得好。現(xiàn)在你可以開始構(gòu)建和發(fā)展本地/blink/Source/devtools/front_end.目錄下的 DevTools 前端代碼了。

Step 4: 拿到門票

現(xiàn)在，你準(zhǔn)備好深究代碼，并開始開發(fā) devtools 源，首先在 http://crbug.com 找到你更改所需的門票并留下一個評論說你要為它寫一份補(bǔ)丁。如果你還沒有決定要改變什么，那么先瀏覽下公開的問題，選擇一個你想做的。如果它被分配給你了，請留下你對它的評論。

另外，如果沒有任何需要更改的問題，此時創(chuàng)建一個新的問題。確保你的描述說清楚了改變是什么以及它為什么需要，然后在底部添加 "patch to follow"。

溝通

在你開始貢獻(xiàn)一張“票”之前，在谷歌開發(fā)工具組上打開一個新線程的做法是一個好主意，這樣你就可以討論你不確定或不知道的內(nèi)容，這些東西可能是你以后工作中需要的。記得不要過度溝通了。

步驟5：提取、開發(fā)、分支、提交

你會發(fā)現(xiàn)閱讀 Chromium guide 對編寫代碼有幫助。

從庫中提取出最新的文件，并確保您正在使用最新的代碼。

git pull --rebase

然后創(chuàng)建一個新的分支，它可以讓你做出自己的更改。

git checkout -b yourbugorfeaturename

在你的開發(fā)工具中打開工具欄，打開你最喜歡的代碼編輯器，開始進(jìn)入本地庫目錄 /blink/Source/devtools/front_end。

注：在開發(fā)過程中使用的刷新鍵或按 ALT + R 代替F5，以你使用開發(fā)者工具為例，用 Ctrl + R 或 Cmd + R 一定會刷新主頁。

在終端編譯器上運(yùn)行你做出的更改：

./devtools/scripts/compile_frontend.py

你應(yīng)該看到“0 error(s), 0 warning(s)”。

你的代碼

應(yīng)符合 Blink 編碼風(fēng)格指南
如果適當(dāng)?shù)脑捑?a rel="nofollow" >測試
應(yīng)通過終止編譯器測試
你應(yīng)該有一個合理的審查規(guī)模（較大的修補(bǔ)程序需要更長的時間）

一旦你做出了改變，就把它提交。在你提交的信息中應(yīng)包括問題代碼和指定它的一個工具補(bǔ)丁。

git commit -m "#175024 DevTools: This describes the Goat Teleporter"

將你上次做出的更改并提交到分支中的內(nèi)容刪除掉是個好方法。

一旦你的補(bǔ)丁完成，你會想編寫和運(yùn)行相關(guān)的布局測試。要開始測試工具布局看 WebKit 布局測試指南。

注意：如果您的補(bǔ)丁需要編寫新的單元測試或用戶界面測試，則需要將它們應(yīng)作為補(bǔ)丁的一部分創(chuàng)建。

Step 6: 上傳你的補(bǔ)丁

在我們評估你做出的貢獻(xiàn)之前，你需要簽署并提交一份完整的 CLA (Contributor License Agreement)。

安裝depot_tools

要上傳你的補(bǔ)丁，你需要安裝 depot_tools。depot_tools。這是一個腳本包，用來管理測試和代碼審查，它包括 gclient，GCL，和 Git-CL 命令,這些以后將很有用。你仍然希望同步 Chromium 與它的所有依賴項(xiàng)。

通過克隆庫下載 depot_tools：

git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git

然后，你需要將它添加到您的路徑。通過添加以下內(nèi)容到你的 .bashrc，.bash_profile 或等效的 shell 文件中。這樣你就不需要在每次你打開一個新的 shell 時手動重置你的路徑。

export PATH="$PATH":path/to/the/depot_tools

注：本指南包括 Windows 的步驟，但由于無法添加depot_tools到 Windows 命令行的路徑中，所以并沒有確認(rèn)是否有效。然而，你可以用 Cygwin 作為一種替代方案。在這里你可以找到在 Windows 安裝depot_tools Cygwin的步驟。

上傳補(bǔ)丁進(jìn)行審查

如果您的修補(bǔ)程序完成了，所有的測試都通過，上傳您的更改：

git cl upload --bypass-hooks

你的編輯會提示你寫補(bǔ)丁說明。詳細(xì)解釋一下你喜歡的改變。保存并退出編輯器以完成補(bǔ)丁提交。

你必須有 codereview.chromium.org 的賬戶并且之后你需要輸入您的憑據(jù)。然后，你會得到審查的URL

Issue created. URL: https://codereview.chromium.org/18173008".

記下這個網(wǎng)址，你可以去頁面查看它的狀態(tài)。

現(xiàn)在你只需要等待你友好的鄰居來評論，以檢查它是不是有用的。

清理

回到 master 分支。

git checkout master

故障診斷工作流程

下面是一些來自某些貢獻(xiàn)者的代替觀點(diǎn)，他們描述了他們的工作流程和一些建議，也許這些內(nèi)容對你的工作有利。如果你遇到下列步驟中列出的任何問題，我們有文檔能夠幫助你診斷問題，而你應(yīng)該能夠自己解決這些問題。

選擇工作流 #1

你要選擇兩流程中的一個：合并或復(fù)位。兩者是“數(shù)學(xué)上等價的”，但是是不同的命令。除非你是個極客超級大師，工作流和思維都有所不同。

大約一半的 Chromium 使用復(fù)位工作流。

git checkout -b myAwesomeBranch
- 在該分支上做出更改
git commit -是“分支”的一些變化
git checkout master
gclient sync
git checkout my_branch
git rebase master
解決任何沖突
如果你結(jié)束了對你分支的很多版本的修訂，復(fù)位可能是很混亂的，因?yàn)樗m用于每個變化，所以你可能需要不停地解決沖突。你可以使用 git rebase -i master 來把不同分支合并，它會打開一個編輯器并且內(nèi)容是多行 pick XXXX。除了第一條 pisk._to_squash 之外都要改動，使用 s 來代替 pick。
git diff master
- 確認(rèn)是你要上傳的補(bǔ)丁
git CL 上傳

合并的工作流程相對來說工作量要小一些，但你最終會將歷史版本合并。此外，你可能很難想象你所提交的代碼/補(bǔ)丁最終會成為 master 分支中的一員。

選擇工作流 #2

在 https://code.google.com/p/chromium/issues/list 上創(chuàng)建一個新的問題，或找到你想修復(fù)的問題。
在你本地的 git checkout 為這個問題創(chuàng)建一個分支。就像像 [verbose-name]-[issue-number]。這使得你更容易找到問題出現(xiàn)在哪個分支中，反之亦然。給自己分配一個問題是很好的，把它標(biāo)記為“開始”狀態(tài)，這樣別人就不會開始做同樣的工作了。
編碼并測試該分支的內(nèi)容。
在那個分支提交變更。您可以把所有的提交合并為一個。這樣在有需要的時候使用復(fù)位會更加容易。
git cl upload。在提交中你需要填寫描述以及問題編號，例如“BUG=231904”。稍后你將被要求提供補(bǔ)丁說明，這些說明會被添加到相同的代碼問題中。請看 https://chromiumcodereview.appspot.com/14329024/ 上的 "Patch Set #1"，"PatchSet #2" 等等。
在更新列表中添加評論，請他們再次審查。你應(yīng)該從主檔案中挑選審稿人，使用 git cl upload 建議審稿人。
收到評論后，如果需要的話可以交流一下。
如果從使用者哪里收到了 LGTM - 請按提交按鈕。
否則，在本地修改這一分支的評論，然后跳轉(zhuǎn)到步驟 3。

有時你的提交可能沒有通過審查，這時候你可能想進(jìn)行復(fù)位。但是有些審核人員不喜歡在審查期間復(fù)位，因?yàn)檫@使得整個審核過程更加麻煩了。

在等待評論時，你可以切換到另一個分支，并且修復(fù)另一個“凍結(jié)”的問題，然后等待審查。

運(yùn)行布局測試

要建立一個可以運(yùn)行的布局測試，先了解 https://codereview.chromium.org/ 上的 layout tests。根據(jù)你提交的補(bǔ)丁類型，可能會有些開發(fā)工具布局測試是你希望在提交前先運(yùn)行一下的。

首先，使用 gclient 來運(yùn)行 git。你可以遵循 Git 使用指南中的步驟來體驗(yàn)這個過程。總之，確保 depot_tools 在你的路徑中。在你想存儲 Chromium 源的目錄中執(zhí)行 fetch blink --nosvn=True（這將需要一些時間，你可以買點(diǎn)零食，或者在手心中畫一個球）。

當(dāng)你完成這一過程，你可以通過構(gòu)建 shell 腳本來加快構(gòu)建過程。

在 Mac 或 Linux 機(jī)上，你可以簡單地執(zhí)行：

ninja -C out/Debug content_shell

如果你有問題，這一步你可以看看為 Mac 的 clang 幫助和 Linux 指令。

這也將需要一些時間。一旦它完成，你可以從 blink/tools/run_layout_tests.sh. 目錄中運(yùn)行布局測試，這個過程中你的電腦可能會有點(diǎn)發(fā)熱。如果你是在 Windows，用 .bat 代替 .sh。預(yù)期中可能會出現(xiàn)一些失?。。ú恍遥Ｒ粋€好的方法是在你做出任何改變之前先運(yùn)行它們，然后在你做出改變后再運(yùn)行它們。你也可以把目錄作為一個參數(shù)傳遞，這樣你只需指明 LayoutTests/inspector 目錄就可以運(yùn)行。

經(jīng)常問問題

結(jié)構(gòu)是什么?

DevTools前端和后端的核心/檢驗(yàn)員使用線性協(xié)議（又名遠(yuǎn)程調(diào)試協(xié)議）互動。關(guān)于它有一些老的文件（2012）:

https://www.webkit.org/blog/1875/announcing-remote-debugging-protocol-v1-0/
https://developer.chrome.com/devtools/docs/debugger-protocol

所有涉及本地的網(wǎng)頁 DOM 和其他屬性的代碼都是原生的。對于和運(yùn)行中頁面的 js 有接觸的代碼是一定要進(jìn)行控制的。

當(dāng)添加一個新的功能，它應(yīng)該怎么實(shí)現(xiàn)？

如果它取決于輸出信息，你應(yīng)該添加一個新的方法到協(xié)議中（protocol.json），例如到 DOM 代理。這將產(chǎn)生綁定到 inspectordomagent 接口的前端部分和相應(yīng)的處理函數(shù)的 js。然后，你實(shí)現(xiàn)他們的后端部分，并呼吁從前端操作。

上一篇：設(shè)備模式&移動仿真下一篇：分析 JavaScript 性能

對 Chrome 開發(fā)工具的貢獻(xiàn)

你怎么幫助?