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

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

有很多方法可以提高你同事的開發(fā)效率。這可能是通過分享你所知道的或是用那些記錄功能提供幫助或者寫一個補丁來改進我們所使用的工具。

你怎么幫助?

除了對源代碼的貢獻以外，下面的集中方式都可以參與幫助：

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

保持更新

開發(fā)工具團隊將會從使用該工具的開發(fā)者那里獲取反饋。如果你想保持更新，你可以訂閱在 crbug 下面的頻道。請記住標記那些對你也有影響的問題。最后，不要忘記提交的功能請求或你找到的調試報告。不僅是關于開發(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ā)者工具源代碼的貢獻

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

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

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

Step 1: 開始

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

獲取代碼

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

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

安裝 Canary

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

DevTools 前端服務

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

當 Blink 庫已經(jīng)準備好厚，進入 devtools 文件夾：

cd blink/Source/devtools  

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

python -m SimpleHTTPServer  

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

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

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

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

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

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

Step 2: 運行 Chromium 的一個邊緣構件

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

在運行 Chromium 時，需要一對命令行標記（或開關）。

使用標記來運行 Canary：

在 Windows 上

1. 右鍵點擊你的“谷歌瀏覽器”圖標
2. 選擇屬性，并將命令行標記到目標區(qū)域的結尾部分。

舉個例子:

"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 上

在終端里，在程序目錄結尾添加標記來運行 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 命令后面加上標記來運行它：

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

這些開關用于做什么？

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

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

Step 3: 建立檢查

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

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

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

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

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

點擊你打開的標簽的縮略圖。你將會有一個完整的選項卡用于檢查其他的選項卡。

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

注意，這個工具實例中指向 http://localhost:8000/front_end/inspector.html 的 URL。這是因為監(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ù)進行...

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

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

Step 4: 拿到門票

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

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

溝通

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

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

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

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

git pull --rebase  

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

git checkout -b yourbugorfeaturename   

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

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

在終端編譯器上運行你做出的更改：

./devtools/scripts/compile_frontend.py

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

你的代碼

1. 應符合 Blink 編碼風格指南
2. 如果適當?shù)脑捑?a rel="nofollow" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" target="_blank" target="_blank">測試
3. 應通過終止編譯器測試
4. 你應該有一個合理的審查規(guī)模（較大的修補程序需要更長的時間）

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

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

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

一旦你的補丁完成，你會想編寫和運行相關的布局測試。要開始測試工具布局看 WebKit 布局測試指南。

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

Step 6: 上傳你的補丁

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

安裝depot_tools

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

通過克隆庫下載 depot_tools：

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

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

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

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

上傳補丁進行審查

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

git cl upload --bypass-hooks  

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

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

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

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

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

清理

回到 master 分支。

git checkout master

故障診斷工作流程

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

選擇工作流 #1

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

大約一半的 Chromium 使用復位工作流。

1. git checkout -b myAwesomeBranch
   • 在該分支上做出更改
2. git commit -是“分支”的一些變化
3. git checkout master
4. gclient sync
5. git checkout my_branch
6. git rebase master
7. 解決任何沖突
8. 如果你結束了對你分支的很多版本的修訂，復位可能是很混亂的，因為它適用于每個變化，所以你可能需要不停地解決沖突。你可以使用 git rebase -i master 來把不同分支合并，它會打開一個編輯器并且內容是多行 pick XXXX。除了第一條 pisk._to_squash 之外都要改動，使用 s 來代替 pick。
9. git diff master
   • 確認是你要上傳的補丁
10. git CL 上傳

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

選擇工作流 #2

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

有時你的提交可能沒有通過審查，這時候你可能想進行復位。但是有些審核人員不喜歡在審查期間復位，因為這使得整個審核過程更加麻煩了。

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

運行布局測試

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

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

當你完成這一過程，你可以通過構建 shell 腳本來加快構建過程。

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

ninja -C out/Debug content_shell

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

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

經(jīng)常問問題

結構是什么?

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

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

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

當添加一個新的功能，它應該怎么實現(xiàn)？

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