有很多方法可以提高你同事的開(kāi)發(fā)效率。這可能是通過(guò)分享你所知道的或是用那些記錄功能提供幫助或者寫(xiě)一個(gè)補(bǔ)丁來(lái)改進(jìn)我們所使用的工具。
除了對(duì)源代碼的貢獻(xiàn)以外，下面的集中方式都可以參與幫助：
開(kāi)發(fā)工具團(tuán)隊(duì)將會(huì)從使用該工具的開(kāi)發(fā)者那里獲取反饋。如果你想保持更新，你可以訂閱在 crbug 下面的頻道。請(qǐng)記住標(biāo)記那些對(duì)你也有影響的問(wèn)題。最后，不要忘記提交的功能請(qǐng)求或你找到的調(diào)試報(bào)告。不僅是關(guān)于開(kāi)發(fā)者工具的，整個(gè) Chrome 的信息都對(duì)我們有用。
Cr-Platform-DevTools Cr-Platform-DevTools-HTML Cr-Platform-DevTools-Memory Cr-Platform-DevTools-Mobile Cr-Platform-DevTools-Performance Cr-Platform-DevTools-UXChrome 開(kāi)發(fā)工具實(shí)際上是用 JavaScript 和 CSS 編寫(xiě)的應(yīng)用。如果你熟悉這些技術(shù)，你就知道如何寫(xiě)一個(gè)補(bǔ)丁。一些人已經(jīng)這樣做了，于是有了顏色選擇器，文件選擇器等功能，這些都是由和你一樣的開(kāi)發(fā)者貢獻(xiàn)的。
IRC 頻道中：#Chrome 開(kāi)發(fā)工具
我們現(xiàn)在正在重新編寫(xiě)這份向?qū)?。如果你想跟著已?jīng)完成的早期工作繼續(xù)幫助我們，請(qǐng)閱讀 DevTools Contributing(draft) 上的評(píng)論
要開(kāi)始為開(kāi)發(fā)工具做出貢獻(xiàn)，你需要注意以下幾件事：
通過(guò)克隆 git 的庫(kù) Blink 進(jìn)行源代碼下載。這個(gè)過(guò)程可以在 30 - 60 分鐘（取決于你的連接）。
git clone https://chromium.googlesource.com/chromium/blink.git當(dāng) Blink 下載后，在 Mac OS/Windows 系統(tǒng)上安裝 Canary 或下載最新的瀏覽器
運(yùn)行本地服務(wù)器器。本地 Web 服務(wù)器將服務(wù)從某些端口（如 8000）來(lái)運(yùn)行來(lái)自 blink/Source/devtools 目錄下的文件。
當(dāng) Blink 庫(kù)已經(jīng)準(zhǔn)備好厚，進(jìn)入 devtools 文件夾：
cd blink/Source/devtools 從那里你可以使用以下命令在 8000 端口運(yùn)行一個(gè)本地服務(wù)器：
python -m SimpleHTTPServer 然后，用你喜歡的瀏覽器打開(kāi) http://8000/front_end/inspector.html 就可以開(kāi)始調(diào)試了！
當(dāng)遠(yuǎn)程調(diào)試和開(kāi)發(fā)前端的 Blink 時(shí)，InspectorBackengCommands.js 文件是基于 protocal.json 文件的內(nèi)容生成的，而不是基于 Chromium 構(gòu)建系統(tǒng)時(shí)的反饋。protocol.json 文件放在 /devtools 目錄下 front_end 文件夾的父文件夾中。這就是為什么你需要在 devtools 目錄下運(yùn)行 Web 服務(wù)器。
注意：如果你已經(jīng)檢查過(guò)整個(gè) Chromium 源，你將需要從 /src/third_party/WebKit/Source/devtools 目錄來(lái)運(yùn)行 web 服務(wù)器。
如果你的功能需要對(duì)后端代碼進(jìn)行修改，那么你一定要去校驗(yàn)和生成 Chromium。否則，你只需要安裝一個(gè)前端文件的網(wǎng)絡(luò)服務(wù)器，并使用遠(yuǎn)程調(diào)試選項(xiàng)運(yùn)行瀏覽器。
注：
protocol.json文件描述了前端和后端之間的 API。它在前端和后端的建設(shè)階段會(huì)生成 API 存根。當(dāng)遠(yuǎn)程調(diào)試的 API 的前端時(shí)，inspectorbackendcommands.js 是由前端代碼生成的。欲了解更多信息，閱讀 Chromium How-tos.。
要開(kāi)始，需要得到一個(gè) Chromium 的 edge-build。這些都是可用于所有平臺(tái)。
在運(yùn)行 Chromium 時(shí)，需要一對(duì)命令行標(biāo)記（或開(kāi)關(guān)）。
使用標(biāo)記來(lái)運(yùn)行 Canary：
舉個(gè)例子:
"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在終端里，在程序目錄結(jié)尾添加標(biāo)記來(lái)運(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.htmlNote: 就像上面一樣，你要在任何的一個(gè)空格前加一個(gè)斜線 "\"。
在 chromium-browswer 命令后面加上標(biāo)記來(lái)運(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這些標(biāo)志使得 Chrome 允許 WebSocket 連接到 localhost：9222 并且能夠從本地 git repo 運(yùn)行前端 UI。這里有一個(gè)命令行開(kāi)關(guān)的完整列表和它們的作用。
如果你沒(méi)有使用開(kāi)發(fā)工具，檢查工具的最簡(jiǎn)單方法是從你的標(biāo)簽移除它們，這樣它就會(huì)在一個(gè)獨(dú)立的窗口顯示。然后點(diǎn)擊你的鍵盤(pán)快捷鍵開(kāi)啟監(jiān)視（如 cmd-alt-i）。這會(huì)開(kāi)啟一個(gè)新的開(kāi)發(fā)工具窗口來(lái)監(jiān)視之前的內(nèi)容。你也可以按照自己的想法來(lái)調(diào)整這些窗口。
一旦打開(kāi) Canary，就會(huì)打開(kāi)一個(gè)新標(biāo)簽，之后可以瀏覽任何網(wǎng)頁(yè)，像 chromium.org。
接下來(lái)，回到“可視頁(yè)面”選項(xiàng)卡，http://localhost:9222
在這里您將看到關(guān)于每一個(gè)被監(jiān)視頁(yè)面的網(wǎng)格菜單。刷新后可以更新數(shù)據(jù)。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/contributing-image01.png" alt="image00" />
這個(gè)網(wǎng)格菜單是的一個(gè)小型網(wǎng)絡(luò)服務(wù)器端運(yùn)行的，該服務(wù)器在 Canary 的第一個(gè)實(shí)例內(nèi)，而 --remote-debugging-port=9222 參數(shù)會(huì)傳遞給該對(duì)象。自從Web服務(wù)器從您本地的 /blink/Source/devtools 目錄下的 git repo 運(yùn)行時(shí)，當(dāng)點(diǎn)擊相關(guān)頁(yè)面時(shí)，devtools 文件夾下的全部文件都會(huì)被檢查。
點(diǎn)擊你打開(kāi)的標(biāo)簽的縮略圖。你將會(huì)有一個(gè)完整的選項(xiàng)卡用于檢查其他的選項(xiàng)卡。
很好的工作，到目前為止！
注意，這個(gè)工具實(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 是作為一個(gè)哈希傳給“監(jiān)視頁(yè)面” URL 的。它通過(guò) websocket 連接到你本地的倉(cāng)庫(kù)，你可能會(huì)注意到，它是 URL ?ws=localhost:9222/devtools/ 的一部分。（你也可以使用工具來(lái)看看這個(gè) WebSocket 幀數(shù)據(jù)）。接下來(lái)繼續(xù)進(jìn)行...
現(xiàn)在，用你的鍵盤(pán)快捷鍵在窗口中打開(kāi)工具。你現(xiàn)在已經(jīng)成功建立檢查器了。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/contributing-image00_1.png" alt="image01" />
做得好?，F(xiàn)在你可以開(kāi)始構(gòu)建和發(fā)展本地/blink/Source/devtools/front_end.目錄下的 DevTools 前端代碼了。
現(xiàn)在，你準(zhǔn)備好深究代碼，并開(kāi)始開(kāi)發(fā) devtools 源，首先在 http://crbug.com 找到你更改所需的門(mén)票并留下一個(gè)評(píng)論說(shuō)你要為它寫(xiě)一份補(bǔ)丁。如果你還沒(méi)有決定要改變什么，那么先瀏覽下公開(kāi)的問(wèn)題，選擇一個(gè)你想做的。如果它被分配給你了，請(qǐng)留下你對(duì)它的評(píng)論。
另外，如果沒(méi)有任何需要更改的問(wèn)題，此時(shí)創(chuàng)建一個(gè)新的問(wèn)題。確保你的描述說(shuō)清楚了改變是什么以及它為什么需要，然后在底部添加 "patch to follow"。
在你開(kāi)始貢獻(xiàn)一張“票”之前，在谷歌開(kāi)發(fā)工具組上打開(kāi)一個(gè)新線程的做法是一個(gè)好主意，這樣你就可以討論你不確定或不知道的內(nèi)容，這些東西可能是你以后工作中需要的。記得不要過(guò)度溝通了。
你會(huì)發(fā)現(xiàn)閱讀 Chromium guide 對(duì)編寫(xiě)代碼有幫助。
從庫(kù)中提取出最新的文件，并確保您正在使用最新的代碼。
git pull --rebase 然后創(chuàng)建一個(gè)新的分支，它可以讓你做出自己的更改。
git checkout -b yourbugorfeaturename 在你的開(kāi)發(fā)工具中打開(kāi)工具欄，打開(kāi)你最喜歡的代碼編輯器，開(kāi)始進(jìn)入本地庫(kù)目錄 /blink/Source/devtools/front_end。
注：在開(kāi)發(fā)過(guò)程中使用的刷新鍵或按 ALT + R 代替F5，以你使用開(kāi)發(fā)者工具為例，用
Ctrl+R或Cmd+R一定會(huì)刷新主頁(yè)。
在終端編譯器上運(yùn)行你做出的更改：
./devtools/scripts/compile_frontend.py
你應(yīng)該看到“0 error(s), 0 warning(s)”。
一旦你做出了改變，就把它提交。在你提交的信息中應(yīng)包括問(wèn)題代碼和指定它的一個(gè)工具補(bǔ)丁。
git commit -m "#175024 DevTools: This describes the Goat Teleporter" 將你上次做出的更改并提交到分支中的內(nèi)容刪除掉是個(gè)好方法。
一旦你的補(bǔ)丁完成，你會(huì)想編寫(xiě)和運(yùn)行相關(guān)的布局測(cè)試。要開(kāi)始測(cè)試工具布局看 WebKit 布局測(cè)試指南。
注意：如果您的補(bǔ)丁需要編寫(xiě)新的單元測(cè)試或用戶界面測(cè)試，則需要將它們應(yīng)作為補(bǔ)丁的一部分創(chuàng)建。
在我們?cè)u(píng)估你做出的貢獻(xiàn)之前，你需要簽署并提交一份完整的 CLA (Contributor License Agreement)。
要上傳你的補(bǔ)丁，你需要安裝 depot_tools。depot_tools。這是一個(gè)腳本包，用來(lái)管理測(cè)試和代碼審查，它包括 gclient，GCL，和 Git-CL 命令,這些以后將很有用。你仍然希望同步 Chromium 與它的所有依賴項(xiàng)。
通過(guò)克隆庫(kù)下載 depot_tools：
git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git 然后，你需要將它添加到您的路徑。通過(guò)添加以下內(nèi)容到你的 .bashrc，.bash_profile 或等效的 shell 文件中。這樣你就不需要在每次你打開(kāi)一個(gè)新的 shell 時(shí)手動(dòng)重置你的路徑。
export PATH="$PATH":path/to/the/depot_tools注：本指南包括 Windows 的步驟，但由于無(wú)法添加depot_tools到 Windows 命令行的路徑中，所以并沒(méi)有確認(rèn)是否有效。然而，你可以用 Cygwin 作為一種替代方案。在這里你可以找到在 Windows 安裝depot_tools Cygwin的步驟。
如果您的修補(bǔ)程序完成了，所有的測(cè)試都通過(guò)，上傳您的更改：
git cl upload --bypass-hooks 你的編輯會(huì)提示你寫(xiě)補(bǔ)丁說(shuō)明。詳細(xì)解釋一下你喜歡的改變。保存并退出編輯器以完成補(bǔ)丁提交。
你必須有 codereview.chromium.org 的賬戶并且之后你需要輸入您的憑據(jù)。然后，你會(huì)得到審查的URL
Issue created. URL: https://codereview.chromium.org/18173008". 記下這個(gè)網(wǎng)址，你可以去頁(yè)面查看它的狀態(tài)。
現(xiàn)在你只需要等待你友好的鄰居來(lái)評(píng)論，以檢查它是不是有用的。
回到 master 分支。
git checkout master
下面是一些來(lái)自某些貢獻(xiàn)者的代替觀點(diǎn)，他們描述了他們的工作流程和一些建議，也許這些內(nèi)容對(duì)你的工作有利。如果你遇到下列步驟中列出的任何問(wèn)題，我們有文檔能夠幫助你診斷問(wèn)題，而你應(yīng)該能夠自己解決這些問(wèn)題。
你要選擇兩流程中的一個(gè)：合并或復(fù)位。兩者是“數(shù)學(xué)上等價(jià)的”，但是是不同的命令。除非你是個(gè)極客超級(jí)大師，工作流和思維都有所不同。
大約一半的 Chromium 使用復(fù)位工作流。
合并的工作流程相對(duì)來(lái)說(shuō)工作量要小一些，但你最終會(huì)將歷史版本合并。此外，你可能很難想象你所提交的代碼/補(bǔ)丁最終會(huì)成為 master 分支中的一員。
有時(shí)你的提交可能沒(méi)有通過(guò)審查，這時(shí)候你可能想進(jìn)行復(fù)位。但是有些審核人員不喜歡在審查期間復(fù)位，因?yàn)檫@使得整個(gè)審核過(guò)程更加麻煩了。
在等待評(píng)論時(shí)，你可以切換到另一個(gè)分支，并且修復(fù)另一個(gè)“凍結(jié)”的問(wèn)題，然后等待審查。
要建立一個(gè)可以運(yùn)行的布局測(cè)試，先了解 https://codereview.chromium.org/ 上的 layout tests。根據(jù)你提交的補(bǔ)丁類(lèi)型，可能會(huì)有些開(kāi)發(fā)工具布局測(cè)試是你希望在提交前先運(yùn)行一下的。
首先，使用 gclient 來(lái)運(yùn)行 git。你可以遵循 Git 使用指南中的步驟來(lái)體驗(yàn)這個(gè)過(guò)程。總之，確保 depot_tools 在你的路徑中。在你想存儲(chǔ) Chromium 源的目錄中執(zhí)行 fetch blink --nosvn=True（這將需要一些時(shí)間，你可以買(mǎi)點(diǎn)零食，或者在手心中畫(huà)一個(gè)球）。
當(dāng)你完成這一過(guò)程，你可以通過(guò)構(gòu)建 shell 腳本來(lái)加快構(gòu)建過(guò)程。
在 Mac 或 Linux 機(jī)上，你可以簡(jiǎn)單地執(zhí)行：
ninja -C out/Debug content_shell
如果你有問(wèn)題，這一步你可以看看為 Mac 的 clang 幫助和 Linux 指令。
這也將需要一些時(shí)間。一旦它完成，你可以從 blink/tools/run_layout_tests.sh. 目錄中運(yùn)行布局測(cè)試，這個(gè)過(guò)程中你的電腦可能會(huì)有點(diǎn)發(fā)熱。如果你是在 Windows，用 .bat 代替 .sh。預(yù)期中可能會(huì)出現(xiàn)一些失敗?。ú恍遥?。一個(gè)好的方法是在你做出任何改變之前先運(yùn)行它們，然后在你做出改變后再運(yùn)行它們。你也可以把目錄作為一個(gè)參數(shù)傳遞，這樣你只需指明 LayoutTests/inspector 目錄就可以運(yùn)行。
結(jié)構(gòu)是什么?
DevTools前端和后端的核心/檢驗(yàn)員使用線性協(xié)議（又名遠(yuǎn)程調(diào)試協(xié)議）互動(dòng)。關(guān)于它有一些老的文件（2012）:
所有涉及本地的網(wǎng)頁(yè) DOM 和其他屬性的代碼都是原生的。對(duì)于和運(yùn)行中頁(yè)面的 js 有接觸的代碼是一定要進(jìn)行控制的。
當(dāng)添加一個(gè)新的功能，它應(yīng)該怎么實(shí)現(xiàn)？
如果它取決于輸出信息，你應(yīng)該添加一個(gè)新的方法到協(xié)議中（protocol.json），例如到 DOM 代理。這將產(chǎn)生綁定到 inspectordomagent 接口的前端部分和相應(yīng)的處理函數(shù)的 js。然后，你實(shí)現(xiàn)他們的后端部分，并呼吁從前端操作。
掃碼關(guān)注鍍金池微信號(hào)
手機(jī)訂課，優(yōu)惠多多