上期教程己經(jīng)學(xué)習(xí)了如何完成一個(gè) web add-ins 插件，本期就總結(jié)一下如何調(diào)試插件。其實(shí)上期教程中己經(jīng)用到了一種。一共有三種方法可用于調(diào)試：

• 通過將清單發(fā)布到 Office Online

• 通過將清單發(fā)布到網(wǎng)絡(luò)文件共享

• 使用 sideload 命令進(jìn)行測試

從方便和測試效果綜合來看，推薦使用 sideload 方法來做測試，簡單易行且效果最好。

Office Online

【適合范圍】

此方法需要在 Office Online 中操作，不適用于在 Windows上 運(yùn)行測試。

【操作流程】

1. 打開瀏覽輸入 office365.com 網(wǎng)址；

2. 輸入用戶名、密碼并登錄帳戶；

3. 在左上角的Office菜單上，單擊Excel；

4. 找到 Excel 模板選擇空模板打開；

5. 在“插入”菜單上，單擊“Office加載項(xiàng)”，在對話框的右上角，單擊“上載我的加載項(xiàng)”。

6. 單擊“瀏覽”，上傳清單文件（比如：colorful-patterns--manifest.xml）；

7. 加載項(xiàng)現(xiàn)在將加載到“主頁”選項(xiàng)卡上，切換到該選項(xiàng)卡，然后按“顯示任務(wù)窗格”。

Office Online 中出現(xiàn)插件TaskPan。

網(wǎng)絡(luò)文件共享

【適合范圍】

此方法僅適用于在Windows上運(yùn)行的Excel，Word和PowerPoint加載項(xiàng); 并且僅適用于使用yo office工具創(chuàng)建并且在package.json文件sideload的scripts部分中具有腳本的加載項(xiàng)。（@1.1.5及以下的 office 模板創(chuàng)建的項(xiàng)目也沒有此腳本）

【設(shè)置目錄共享】

1、轉(zhuǎn)到項(xiàng)目所在文件夾的目錄；

2、選中目錄鼠標(biāo)右鍵設(shè)置文件夾共享；

3、復(fù)制共享目錄備用；

【設(shè)置Office信任】

1、將文件夾的完整網(wǎng)絡(luò)路徑輸入“ 目錄URL”框后，選擇“ 添加目錄”按鈕；

2、選中新添加項(xiàng)目的“在菜單中顯示”復(fù)選框。

【設(shè)置Office信任】

1、打開 Excel 文件，插入-->我的加載項(xiàng)；

2、出現(xiàn)添加共享目錄所在的項(xiàng)目，選中點(diǎn)擊添加。

著Excel中會(huì)出現(xiàn)方加載項(xiàng)的TaskPan按鈕

sideload

【適合范圍】

如果項(xiàng)目是使用 Visual Studio 創(chuàng)建的，或者VSCode 使用較早的 Office 模板而沒有 sideload 腳本，則可以使用這種方法來達(dá)到與 sideload 相似的效果。

【操作流程】

1、以管理員身份打開命令提示符。

2、將目錄更改為加載項(xiàng)項(xiàng)目文件夾的根目錄。

3、運(yùn)行以下命令以在端口3000上啟動(dòng)本地Web服務(wù)器實(shí)例以提供加載項(xiàng)項(xiàng)目：

npm run start

4、以管理員身份打開第二個(gè)命令提示符。

5、將目錄更改為加載項(xiàng)項(xiàng)目文件夾的根目錄。

6、運(yùn)行以下命令以引導(dǎo)主機(jī)應(yīng)用程序（例如Excel，Word）并在主機(jī)應(yīng)用程序中注冊您的加載項(xiàng)：

npm run sideload

接著會(huì)自動(dòng)啟動(dòng)桌面Excel并加載該插件。

附加調(diào)試器

【適合范圍】

附加調(diào)試器功能將直接將調(diào)試器附加到正確的Internet Explorer進(jìn)程。無論您使用的是Yeoman Generator，Visual Studio Code，node.js，Angular還是其他工具，都可以附加調(diào)試器。

1、在Office 2016 for Windows 的較高版本中，可以從任務(wù)窗格附加調(diào)試器；

2、前提是電腦上己經(jīng)裝有 Visual Studio 2015 或更高版本；

3、只適用于桌面加載的插件，也就是后兩種調(diào)試模式。

【操作流程】

要啟動(dòng)“ 附加調(diào)試器”工具，請選擇任務(wù)窗格的右上角以激活“ 個(gè)性”菜單（如下圖中的紅色圓圈所示）。選擇Attach Debugger。這將啟動(dòng)Visual Studio實(shí)時(shí)調(diào)試器對話框，如下圖所示。

在Visual Studio中，您將在解決方案資源管理器中看到代碼文件。您可以將斷點(diǎn)設(shè)置為要在Visual Studio中調(diào)試的代碼行。

F12工具

【適合范圍】

Windows 10中包含的F12開發(fā)人員工具可幫助您調(diào)試，測試和加速網(wǎng)頁。如果您沒有使用像Visual Studio這樣的IDE，或者您需要在IDE外部運(yùn)行加載項(xiàng)時(shí)調(diào)查問題，也可以使用它們來開發(fā)和調(diào)試Office加載項(xiàng)。

1、只能用于 Windows 10 平臺(tái)

2、只能用于桌面 Office 程序

【操作流程】

1、啟動(dòng)與您的Office版本對應(yīng)的F12開發(fā)工具：

C:\Windows\SysWOW64\F12.IEChooser.exe

3、F12調(diào)試工具（本次不展開了）

目錄序列

Script Lab 01：快速Office 365開發(fā)工具

Script Lab 02：Script Lab，知識(shí)儲(chǔ)備

Script Lab 03：Script Lab，啟動(dòng)函數(shù)，Excel基礎(chǔ)操作（1）

Script Lab 04：Script Lab，九九乘法表，Excel基礎(chǔ)操作（2）

Script Lab 05：Office JavaScript API助手，Excel基礎(chǔ)操作（3）

Script Lab 06：事件處理，Excel基礎(chǔ)操作（4）

Script Lab 07：引入控件，Excel基礎(chǔ)操作（5）

Script Lab 08：單詞“卡拉OK”，Word基礎(chǔ)操作

Script Lab 09：異步調(diào)用函數(shù)，PowerPoint基礎(chǔ)操作

Script Lab 10：為Officejs開發(fā)配置VSCode環(huán)境

Script Lab 11：OIfficeJS的三種調(diào)試方式

者：basinwang，騰訊 PCG 前端開發(fā)工程師

大型項(xiàng)目容易遇到性能問題,一般來說，當(dāng)我們遇到性能瓶頸的時(shí)候，才會(huì)開始去進(jìn)行相應(yīng)的分析。分析的方向除了業(yè)務(wù)本身的特點(diǎn)相關(guān)之外，常見的還可以借助一些工具來發(fā)現(xiàn)問題。本文主要介紹前端性能分析可以怎么走~

前端性能分析工具（Chrome DevTools）

一般來說，前端的性能分析通?？梢詮?strong>時(shí)間和空間兩個(gè)角度來進(jìn)行：

• 時(shí)間：常見耗時(shí)，如頁面加載耗時(shí)、渲染耗時(shí)、網(wǎng)絡(luò)耗時(shí)、腳本執(zhí)行耗時(shí)等
• 空間：資源占用，包括 CPU 占用、內(nèi)存占用、本地緩存占用等

那么，下面來看看有哪些常見的工具可以借來用用。由于我們的網(wǎng)頁基本上跑在瀏覽器中，所以基本上大多數(shù)的工具都來源于瀏覽器自身提供，首選工具自然是 Chrome DevTools。本文我們也主要圍繞 Chrome DevTools 來進(jìn)行說明。

Lighthouse

Lighthouse 的前身是 Chrome DevTools 面板中的 Audits。在 Chrome 60 之前的版本中, 這個(gè)面板只包含網(wǎng)絡(luò)使用率和頁面性能兩個(gè)測量類別，從 Chrome 60 版本開始， Audits 面板已經(jīng)被 Lighthouse 的集成版取代。而在最新版本的 Chrome 中，則需要單獨(dú)安裝 Lighthouse 拓展程序來使用，也可以通過腳本來使用。

架構(gòu)

Lighthouse 架構(gòu)

下面是 Lighthouse 的組成部分：

• 驅(qū)動(dòng)（Driver）：和 Chrome Debugging Protocol 進(jìn)行交互的接口
• 收集器（Gatherers）：使用驅(qū)動(dòng)程序收集頁面的信息，收集器的輸出結(jié)果被稱為 Artifact
• 審查器（Audits）：將 Artifact 作為輸入，審查器會(huì)對其運(yùn)行測試，然后分配通過/失敗/得分的結(jié)果
• 報(bào)告（Report）：將審查的結(jié)果分組到面向用戶的報(bào)告中（如最佳實(shí)踐），對該部分應(yīng)用加權(quán)和總體然后得出評分

主要功能

Lighthouse 會(huì)在一系列的測試下運(yùn)行網(wǎng)頁，比如不同尺寸的設(shè)備和不同的網(wǎng)絡(luò)速度。它還會(huì)檢查頁面對輔助功能指南的一致性，例如顏色對比度和 ARIA 最佳實(shí)踐。

在比較短的時(shí)間內(nèi)，Lighthouse 可以給出這樣一份報(bào)告（可將報(bào)告生成為 JSON 或 HTML）：

Lighthouse 架構(gòu)

這份報(bào)告從 5 個(gè)方面來分析頁面：性能、輔助功能、最佳實(shí)踐、搜索引擎優(yōu)化和 PWA。像性能方面，會(huì)給出一些常見的耗時(shí)統(tǒng)計(jì)。除此以外，還會(huì)給到一些詳細(xì)的優(yōu)化方向。

如果你希望短時(shí)間內(nèi)對你的網(wǎng)站進(jìn)行較全面的評估，可以使用 Lighthouse 來跑一下分?jǐn)?shù)，確定大致的優(yōu)化方向。

Performance 面板

Performance 面板同樣有個(gè)前身，叫 Timeline。該面板用于記錄和分析運(yùn)行時(shí)性能，運(yùn)行時(shí)性能是頁面運(yùn)行時(shí)（而不是加載）的性能。

使用步驟

Performance 面板功能特別多，具體的分析也可以單獨(dú)講一篇了。這里我們簡單說一下使用的步驟：

1. 在隱身模式下打開 Chrome。隱身模式可確保 Chrome 以干凈狀態(tài)運(yùn)行，例如瀏覽器的擴(kuò)展可能會(huì)在性能評估中產(chǎn)生影響。
2. 在 DevTools 中，單擊“Performance”選項(xiàng)卡，并進(jìn)行一些基礎(chǔ)配置（更多參考官方說明）。
3. 按照提示單擊記錄，開始記錄。進(jìn)行完相應(yīng)的操作之后，點(diǎn)擊停止。
4. 當(dāng)頁面運(yùn)行時(shí)，DevTools 捕獲性能指標(biāo)。停止記錄后，DevTools 處理數(shù)據(jù)，然后在 Performance 面板上顯示結(jié)果。

主要功能

關(guān)于 Performance 怎么使用的文章特別多，大家網(wǎng)上隨便搜一下就能搜到。一般來說，主要使用以下功能：

• 查看 FPS 圖表：當(dāng)在 FPS 上方看到紅色條形時(shí)，表示幀速率下降得太低，以至于可能損害用戶體驗(yàn)。通常，綠色條越高，F(xiàn)PS 越高
• 查看 CPU 圖表：CPU 圖表在 FPS 圖表下方。CPU 圖表的顏色對應(yīng)于性能板的底部的 Summary 選項(xiàng)卡
• 查看 火焰圖：火焰圖直觀地表示出了內(nèi)部的 CPU 分析，橫軸是時(shí)間，縱軸是調(diào)用指針，調(diào)用棧最頂端的函數(shù)在最下方。啟用 JS 分析器后，火焰圖會(huì)顯示調(diào)用的每個(gè) JavaScript 函數(shù)，可用于分析具體函數(shù)
• 查看 Buttom-up：此視圖可以看到某些函數(shù)對性能影響最大，并能夠檢查這些函數(shù)的調(diào)用路徑

具體要怎么定位某些性能瓶頸，可以參考官方文檔系列文章，這里就不詳細(xì)介紹啦。

Performance Monitor

打開 Chrome 控制臺(tái)后，按組合鍵ctrl + p(Mac 快捷鍵為command + p)，輸入> Show Performance Monitor，就可以打開 Performance Monitor 性能監(jiān)視器。主要的監(jiān)控指標(biāo)包括：

• CPU usage：CPU 占用率
• JS head size：JS 內(nèi)存使用大小
• DOM Nodes：內(nèi)存中掛載的 DOM 節(jié)點(diǎn)個(gè)數(shù)
• JS event listeners：事件監(jiān)聽數(shù)
• ...：其他等等

大多數(shù)情況下，我們在進(jìn)行性能優(yōu)化的時(shí)候，使用上面一些工具也足以確定大致的優(yōu)化方向。更多的細(xì)節(jié)和案例，就不在這里詳述了。

前端性能監(jiān)控

除了具體的性能分析和定位，我們也經(jīng)常需要對業(yè)務(wù)進(jìn)行性能監(jiān)控。前端性能監(jiān)控包括兩種方式：合成監(jiān)控（Synthetic Monitoring，SYN）、真實(shí)用戶監(jiān)控（Real User Monitoring，RUM）。

合成監(jiān)控

合成監(jiān)控就是在一個(gè)模擬場景里，去提交一個(gè)需要做性能審計(jì)的頁面，通過一系列的工具、規(guī)則去運(yùn)行你的頁面，提取一些性能指標(biāo)，得出一個(gè)審計(jì)報(bào)告。例如上面介紹的 Lighthouse 就是合成監(jiān)控。

合成監(jiān)控的使用場景不多，一般可能出現(xiàn)在開發(fā)和測試的過程中，例如結(jié)合流水線跑性能報(bào)告、定位性能問題時(shí)本地跑的一些簡單任務(wù)分析等。該方式的優(yōu)點(diǎn)顯而易見：

• 可采集更豐富的數(shù)據(jù)指標(biāo)，例如結(jié)合 Chrome Debugging Protocol 獲取到的數(shù)據(jù)
• 較成熟的解決方案和工具，實(shí)現(xiàn)成本低
• 不影響真實(shí)用戶的性能體驗(yàn)

真實(shí)用戶監(jiān)控

真實(shí)用戶監(jiān)控，就是用戶在我們的頁面上訪問，訪問之后就會(huì)產(chǎn)生各種各樣的性能指標(biāo)。我們在用戶訪問結(jié)束的時(shí)候，把這些性能指標(biāo)上傳到我們的日志服務(wù)器上，進(jìn)行數(shù)據(jù)的提取清洗加工，最后在我們的監(jiān)控平臺(tái)上進(jìn)行展示的一個(gè)過程。

我們提及前端監(jiān)控的時(shí)候，大多數(shù)都包括了真實(shí)用戶監(jiān)控。常見的一些性能監(jiān)控包括加載耗時(shí)、DOM 渲染耗時(shí)、接口耗時(shí)統(tǒng)計(jì)等，而對于頁面加載過程，可以看到它被定義成了很多個(gè)階段：

RUM 性能模型

而我們要做的，則是在力所能及的地方進(jìn)行打點(diǎn)、計(jì)算、采集、上報(bào)，該過程常常需要借助 Performance Timeline API。將需要的數(shù)據(jù)發(fā)送到服務(wù)端，然后再對這些數(shù)據(jù)進(jìn)行處理，最終通過可視化等方式進(jìn)行監(jiān)控。因此，真實(shí)用戶監(jiān)控往往需要結(jié)合業(yè)務(wù)本身的前后端架構(gòu)設(shè)計(jì)來建設(shè)，其優(yōu)點(diǎn)也比較容易理解：

• 完全還原真實(shí)場景，減去模擬成本
• 數(shù)據(jù)樣本足夠抹平個(gè)體的差異
• 采集數(shù)據(jù)可用于更多場景的分析和優(yōu)化

對比合成監(jiān)控，真實(shí)用戶監(jiān)控在有些場景下無法拿到更多的性能分析數(shù)據(jù)（例如具體哪里 CPU 占用、內(nèi)存占用高），因此更多情況下作為優(yōu)化效果來參考。這些情況下，具體的分析和定位可能還是得依賴合成監(jiān)控。

但真實(shí)用戶監(jiān)控也有自身的優(yōu)勢，例如 TCP、DNS 連接耗時(shí)過高，在各種環(huán)境下的一些運(yùn)行耗時(shí)問題，合成監(jiān)控是很難發(fā)現(xiàn)的。

性能分析自動(dòng)化

我們在開發(fā)過程中，也常常需要進(jìn)行性能分析。而前端的性能分析上手成本也不低，除了基本的頁面加載耗時(shí)、網(wǎng)絡(luò)耗時(shí)，更具體的定位往往需要結(jié)合前面介紹的 Performance 面板、FPS、CPU、火焰圖等一點(diǎn)點(diǎn)來分析。

如果這一塊想要往自動(dòng)化方向發(fā)展，我們可以怎么做呢？

使用 Lighthouse

前面也有介紹 Lighthouse，它提供了腳本的方式使用。因此，我們可以通過自動(dòng)化任務(wù)跑腳本的方式，使用 Lighthouse 跑分析報(bào)告，通過對比以往的數(shù)據(jù)來進(jìn)行功能變更、性能優(yōu)化等場景的性能回歸。

使用 Lighthouse 的優(yōu)勢在于開發(fā)成本低，只需要按照官方提供的配置來調(diào)整、獲取自己需要的一些數(shù)據(jù)，就可以快速接入較全面的 Lighthouse 擁有的性能分析能力。

不過由于 Lighthouse 同樣基于 CDP(Chrome DevTools Protocol)，因此除了實(shí)現(xiàn)成本降低了，CDP 缺失的一些能力它也一樣會(huì)缺失。

Chrome DevTools Protocol

Chrome DevTools Protocol 允許第三方對基于 Chrome 的 Web 應(yīng)用程序進(jìn)行檢測、檢查、調(diào)試、分析等。有了這個(gè)協(xié)議，我們就可以自己開發(fā)工具獲取 Chrome 的數(shù)據(jù)了。

認(rèn)識(shí) Chrome DevTools 協(xié)議

Chrome DevTools 協(xié)議基于 WebSocket，利用 WebSocket 建立連接 DevTools 和瀏覽器內(nèi)核的快速數(shù)據(jù)通道。

我們使用的 Chrome DevTools 其實(shí)也是一個(gè) Web 應(yīng)用。我們使用 DevTools 的時(shí)候，瀏覽器內(nèi)核 Chromium 本身會(huì)作為一個(gè)服務(wù)端，我們看到的瀏覽器調(diào)試工具界面，通過 Websocket 和 Chromium 進(jìn)行通信。建立過程如下：

1. DevTools 將作為 Web 應(yīng)用程序，Chromium 作為服務(wù)端提供連接。
2. 通過 HTTP 提取 HTML、JavaScript 和 CSS 文件。
3. 資源加載后，DevTools 會(huì)建立與瀏覽器的 Websocket 連接，并開始交換 JSON 消息。

同樣的，當(dāng)我們通過 DevTools 從 Windows、Mac 或 Linux 計(jì)算機(jī)遠(yuǎn)程調(diào)試 Android 設(shè)備上的實(shí)時(shí)內(nèi)容時(shí)，使用的也是該協(xié)議。當(dāng) Chromium 以一個(gè)--remote-debugging-port=0標(biāo)志啟動(dòng)時(shí)，它將啟動(dòng) Chrome DevTools 協(xié)議服務(wù)器。

Chrome DevTools 協(xié)議域劃分

Chrome DevTools 協(xié)議具有與瀏覽器的許多不同部分（例如頁面、Service Worker 和擴(kuò)展程序）進(jìn)行交互的 API。該協(xié)議把不同的操作劃分為了不同的域（domain），每個(gè)域負(fù)責(zé)不同的功能模塊。比如DOM、Debugger、Network、Console和Performance等，可以理解為 DevTools 中的不同功能模塊。

使用該協(xié)議我們可以：

• 獲取 JS 的 Runtime 數(shù)據(jù)，常用的如window.performance和window.chrome.loadTimes()等
• 獲取Network及Performance數(shù)據(jù)，進(jìn)行自動(dòng)性能分析
• 使用 Puppeteer 的 CDPSession，與瀏覽器的協(xié)議通信會(huì)變得更加簡單

與性能相關(guān)的域

本文講性能分析相關(guān)，因此這里我們只關(guān)注和性能相關(guān)的域。

1. Performance。從Performance域中Performance.getMetrics()可以拿到獲取運(yùn)行時(shí)性能指標(biāo)包括：

• Timestamp: 采取度量樣本的時(shí)間戳
• Documents: 頁面中的文檔數(shù)
• Frames: 頁面中的幀數(shù)
• JSEventListeners: 頁面中的事件數(shù)
• Nodes: 頁面中的 DOM 節(jié)點(diǎn)數(shù)
• LayoutCount: 全部或部分頁面布局的總數(shù)
• RecalcStyleCount: 頁面樣式重新計(jì)算的總數(shù)
• LayoutDuration: 所有頁面布局的合并持續(xù)時(shí)間
• RecalcStyleDuration: 所有頁面樣式重新計(jì)算的總持續(xù)時(shí)間
• ScriptDuration: JavaScript 執(zhí)行的持續(xù)時(shí)間
• TaskDuration: 瀏覽器執(zhí)行的所有任務(wù)的合并持續(xù)時(shí)間
• JSHeapUsedSize: 使用的 JavaScript 棧大小
• JSHeapTotalSize: JavaScript 棧總大小

2. Tracing。Tracing域可獲取頁面加載的 DevTools 性能跟蹤?？梢允褂肨racing.start和Tracing.stop創(chuàng)建可在 Chrome DevTools 或時(shí)間軸查看器中打開的跟蹤文件。

我們能看到生成的 JSON 文件長這樣：

這樣的 JSON 文件，我們可以丟到 DevTools Timeline Viewer 中，可以看到對應(yīng)的時(shí)間軸和火焰圖：

3. Runtime。Runtime域通過遠(yuǎn)程評估和鏡像對象暴露 JavaScript 的運(yùn)行時(shí)?？梢酝ㄟ^Runtime.getHeapUsage獲取 JavaScript 棧的使用情況，通過Runtime.evaluate計(jì)算全局對象的表達(dá)式，通過Runtime.queryObjects迭代 JavaScript 棧并查找具有給定原型的所有對象（可用于計(jì)算原型鏈中某處具有相同原型的所有對象，衡量 JavaScript 內(nèi)存泄漏）。

除了上面介紹的這些，還有Network可以分析網(wǎng)絡(luò)相關(guān)的性能，以及其他可能涉及 DOM 節(jié)點(diǎn)、JS 執(zhí)行等各種各樣的數(shù)據(jù)分析，更多的可能需要大家自己去研究了。

自動(dòng)化性能分析

通過使用 Chrome DevTools 協(xié)議，我們可以獲取 DevTools 提供的很多數(shù)據(jù)，包括網(wǎng)絡(luò)數(shù)據(jù)、性能數(shù)據(jù)、運(yùn)行時(shí)數(shù)據(jù)。

對于如何使用該協(xié)議，其實(shí)已經(jīng)有很多大神針對這個(gè)協(xié)議封裝出不同語言的庫，包括 Node.js、Python、Java 等，可以根據(jù)需要在 awesome-chrome-devtools 這個(gè)項(xiàng)目中找到。

至于我們到底能拿到怎樣的數(shù)據(jù)，可以做到怎樣的自動(dòng)化程度，就不在本文里講述啦，后面有機(jī)會(huì)再開篇文章詳細(xì)講講。

參考

• 你一定要知道的 Chrome DevTool 新功能
• 前端性能分析利器-Chrome 性能分析&性能監(jiān)視器
• 螞蟻金服如何把前端性能監(jiān)控做到極致?
• chrome devtools protocol——Web 性能自動(dòng)化實(shí)踐介紹
• Chrome DevTools Protocol
• Web Performance Recipes With Puppeteer

碼調(diào)試時(shí)，工具很重要，因?yàn)槟撤N程度上，它能決定我們是否可以快速修復(fù)代碼中的問題。以前，調(diào)試頗具挑戰(zhàn)。由于缺乏可靠的調(diào)試器，開發(fā)人員不得不使用一些特殊技巧。

例如，在調(diào)試移動(dòng)應(yīng)用和 Web 站點(diǎn)時(shí)，你需要在桌面電腦上重現(xiàn)問題，然后使用 Chrome 開發(fā)者工具或其他類似的工具集。但是，這些技巧并不是那么有效，你必須要在桌面瀏覽器和移動(dòng)設(shè)備間不斷切換。而今天，我們有了一個(gè)強(qiáng)大的工具套件，它允許我們就像運(yùn)行本地應(yīng)用那樣在不同的設(shè)備上調(diào)試有缺陷的代碼。最重要的是，這些遠(yuǎn)程調(diào)試工具不僅解決了調(diào)試方面所面臨的挑戰(zhàn)，還加強(qiáng)了開發(fā)團(tuán)隊(duì)間的協(xié)作。

1.Rookout

Rookout 是一個(gè)創(chuàng)新性的工具，它提升了調(diào)試過程的敏捷性。它可以調(diào)試 serverless 和容器化應(yīng)用中的 JVM、Node.JS 和 Python 代碼。

Rookout 非常棒的一點(diǎn)在于它允許用戶快速且安全地調(diào)試 staging 和生產(chǎn)環(huán)境的應(yīng)用。它能夠在幾秒鐘之內(nèi)提供所有需要的數(shù)據(jù)，消除了冗長和復(fù)雜的調(diào)試過程。

Rookout 能夠按需提供數(shù)據(jù)，確保了開發(fā)人員可以理解和調(diào)試代碼中所存在的問題，不需要編碼、重新部署和重新啟動(dòng)他們的應(yīng)用。

借助 Rookout，我們可以遠(yuǎn)程調(diào)試實(shí)時(shí)的 Electron 應(yīng)用。Rookout 的可共享接口允許開發(fā)者在棘手的 Electron 應(yīng)用程序中設(shè)置不間斷的斷點(diǎn)（與常規(guī)端點(diǎn)類似，只不過這種端點(diǎn)不接觸代碼，能夠讓我們在不停止或中斷應(yīng)用的情況下，獲取代碼中的數(shù)據(jù)）。

借助該工具，我們可以完整地看到應(yīng)用的性能，這樣就可以跟蹤問題并開發(fā)對應(yīng)的修復(fù)程序。Rookout 能夠讓這一切變成現(xiàn)實(shí)，而且不需要在終端用戶上安裝任何額外的軟件。

亮點(diǎn)

• 易于上手起步；
• 與 Git 無縫集成；
• 支持與一系列工具的集成，如 Slack、Datadog、Sentry、Sumologic 等；
• 交互跟蹤和屏幕共享功能；
• 實(shí)時(shí)提供全面的調(diào)試數(shù)據(jù)。

2.Visual Studio Code

Visual Studio Code 始終是每個(gè)使用.NET 開發(fā)人員的首選。它有大量的特性來實(shí)現(xiàn)本地和遠(yuǎn)程調(diào)試。借助該工具，我們可以設(shè)置條件端點(diǎn)和日志點(diǎn)。

它還允許我們探查變量。對于遠(yuǎn)程調(diào)試，我們需要安裝 VS code 遠(yuǎn)程開發(fā)擴(kuò)展包。這個(gè)包有三個(gè)擴(kuò)展，它們提供了啟動(dòng)、監(jiān)控和加速遠(yuǎn)程調(diào)試循環(huán)的所有內(nèi)容。

亮點(diǎn)

• 免費(fèi)試用，跨平臺(tái)；
• 有微軟支持的高度活躍的開發(fā)社區(qū)；
• 集成了 Git 版本控制；
• 用來實(shí)現(xiàn)工作流增強(qiáng)的大量擴(kuò)展和定制選項(xiàng)；
• 非常棒的自動(dòng)化代碼檢查和代碼顏色高亮。

3.RubyMine

RubyMine 是一個(gè)強(qiáng)大的、智能的跨平臺(tái) IDE，它允許我們調(diào)試 Ruby on Rails、CoffeeScript、JavaScript、CSS、ERB 和 HAML 等，其優(yōu)秀的內(nèi)置調(diào)試器允許我們輕松地設(shè)置斷點(diǎn)和定義命中條件。

JetBrains 的 RubyMine 提供了兩種方式來調(diào)試在遠(yuǎn)程設(shè)備上運(yùn)行的應(yīng)用。首先，你可以添加遠(yuǎn)程 Ruby 解釋器并配置本地和遠(yuǎn)程項(xiàng)目文件的映射，然后啟動(dòng)調(diào)試會(huì)話。

或者，你也可以在遠(yuǎn)程設(shè)備上運(yùn)行應(yīng)用，然后添加 Ruby 解釋器。

完成之后，配置文件之間的映射并綁定到運(yùn)行中的進(jìn)程上。在調(diào)試無法在 IDE 直接啟動(dòng)的應(yīng)用時(shí)，這一點(diǎn)尤為重要。

這個(gè)工具另外很棒的一點(diǎn)在于它允許我們同時(shí)啟動(dòng)多個(gè)調(diào)試進(jìn)程。

亮點(diǎn)

• RubyMine 基于強(qiáng)大的 intelliJ IDEA 平臺(tái)；
• 對 Ruby 相關(guān)的框架和技術(shù)提供了良好的支持；
• 自動(dòng)完成特性非常棒；
• 與 Git 集成地非常好；
• 支持多個(gè)插件；
• 與 Rails 無縫集成。

4.PyCharm

PyCharm 是 JetBrains 為 Python 開發(fā)的一個(gè)健壯的 IDE。這個(gè)智能的代碼編輯器提供了遠(yuǎn)程開發(fā)的功能，包括在虛擬機(jī)和遠(yuǎn)程主機(jī)上運(yùn)行、測試、調(diào)試和部署應(yīng)用的能力。

調(diào)試器提供了多種斷點(diǎn)、幀視圖、監(jiān)視、步進(jìn)模式、遠(yuǎn)程解釋器以及一個(gè)調(diào)試控制臺(tái)。

PyCharm 提供了很多令人驚嘆的特性，包括復(fù)雜場景的自動(dòng)完成、優(yōu)秀的重構(gòu)支持以及與其他工具的無縫集成，如 Django、IPython、Docker、Vagrant 和 Pytest。

除此之外，PyCharm 還是一個(gè)非常棒的跨平臺(tái)開發(fā)工具。除了 Python，它還支持 JavaScript、Cython、CoffeeScript、TypeScript、SQL、HTML/CSS、Node.js、AngularJS 等。

亮點(diǎn)

• 出色在 IDE 中連接多數(shù)據(jù)庫進(jìn)行查詢的功能；
• 搜索和安裝包非常容易；
• 自動(dòng)化的代碼生成；
• Git 可視化；
• 動(dòng)態(tài)展示代碼錯(cuò)誤，使其易于修復(fù)。

5.GDB

GDB 可以高效地調(diào)試另外一臺(tái)機(jī)器上的程序。為了進(jìn)行遠(yuǎn)程調(diào)試，我們需要在宿主機(jī)上運(yùn)行 GDB 工具。另外，需要在目標(biāo)系統(tǒng)上運(yùn)行 gdbserver，這樣兩個(gè)工具就可以通過網(wǎng)絡(luò)或者 GDB 遠(yuǎn)程序列化協(xié)議的 serial line 進(jìn)行通信。

GDB/gdbserver 的遠(yuǎn)程調(diào)試有兩個(gè)配置選項(xiàng)。首先，涉及到使用遠(yuǎn)程 GDB 自動(dòng)構(gòu)建并上傳應(yīng)用代碼到遠(yuǎn)程機(jī)器。

第二個(gè)選項(xiàng)是在應(yīng)該使用可執(zhí)行文件的地方，使用 GDB 的遠(yuǎn)程調(diào)試功能。

亮點(diǎn)

• 易于使用和跟蹤代碼中的錯(cuò)誤；
• 跨平臺(tái)并提供了廣泛的語言支持；
• 高效的核心 dump 分析。

6.Eclipse

Eclipse 是一個(gè)適用于 Java 開發(fā)的知名 IDE，同時(shí)還支持 Python、Ruby、C#和 PHP 等語言。Eclipse IDE 具有開發(fā)和調(diào)試的高級特性，使其成為一個(gè)全面的工具。

Eclipse 最令人印象深刻的特性之一就是平臺(tái)的調(diào)試視圖，它能夠展現(xiàn)詳細(xì)的調(diào)試信息，如斷點(diǎn)、變量、調(diào)用棧以及線程。

借助 Eclipse，我們可以單步執(zhí)行程序、掛起和恢復(fù)線程、計(jì)算表達(dá)式以及探查表達(dá)式的值。在 Eclipse 上管理遠(yuǎn)程調(diào)試配置非常簡單直接，這使得該工具在開發(fā)者中更受歡迎。

亮點(diǎn)

• 自動(dòng)化的代碼完成；
• 對重構(gòu)的良好支持；
• 優(yōu)秀的導(dǎo)航功能；
• 有助于進(jìn)行語法檢查，實(shí)現(xiàn)整潔和高效的代碼；
• Git 集成。

7.Zend Studio 調(diào)試器

Zend Studio 是一個(gè)專業(yè)的 IDE，支持 PHP 代碼的編輯、測試、調(diào)試等功能。

它與 Zend Server 進(jìn)行了緊密的集成，因此創(chuàng)建了一個(gè)完整的 PHP 環(huán)境，可以更容易地分析在 staging 和生產(chǎn)環(huán)境中探測到的問題。

Zend 還提供了一個(gè) PHP 擴(kuò)展，用戶可以將其安裝到 Web 服務(wù)器上以調(diào)試 PHP 腳本。使用 Zend 進(jìn)行調(diào)試非常容易，你只需要打開源碼、在項(xiàng)目中設(shè)置斷點(diǎn)并運(yùn)行調(diào)試會(huì)話即可。

Zend 上的遠(yuǎn)程調(diào)試可以通過三種方式實(shí)現(xiàn)。第一個(gè)方案是使用 Zend Studio 上的 Debug URL 功能。

其次，你可以使用 Zend Studio 中的 Debug as Web Page 功能。最后，還可以使用 Firefox 或 Chrome 上的 Zend 瀏覽器工具欄。

亮點(diǎn)

• 能夠通過簡單的幾個(gè)按鍵篩選項(xiàng)目文件；
• 高效、快速的平臺(tái)；
• 廣大的社區(qū)支持；
• 非常適合構(gòu)建和調(diào)試 PHP 應(yīng)用；
• 該框架非常靈活。

8.WinPdb

WinPdb 是一個(gè)非常棒的 Python 調(diào)試器，能夠很好地在 Windows、Mac OS 和 Linux 系統(tǒng)上運(yùn)行。它同時(shí)兼容 Python 2.x 和 Python 3.x。

這個(gè)調(diào)試工具支持智能斷點(diǎn)、命名空間修改、多線程、嵌入式調(diào)試以及加密通信。對于遠(yuǎn)程調(diào)試功能來講，我們需要將 rpdb2.py（Winpdb 的命令行調(diào)試器）復(fù)制到遠(yuǎn)程機(jī)器上。

完成之后，使用調(diào)試器在遠(yuǎn)程機(jī)器啟動(dòng) Python 腳本。在本地機(jī)器上，啟動(dòng) GUI 并關(guān)聯(lián)要調(diào)試的腳本。此時(shí)，我們可以使用遠(yuǎn)程設(shè)備腳本的基礎(chǔ)名稱或完整路徑。關(guān)于使用 WinPDB 調(diào)試 Python 腳本的更多知識(shí)，可以參考該教程。

亮點(diǎn)

• 支持多線程調(diào)試；
• 支持遠(yuǎn)程調(diào)試的加密通信；
• 比 PDB 更快；
• 易于使用的 GUI，支持?jǐn)帱c(diǎn)、棧、變量探測等功能。