調(diào)試是軟件開發(fā)的重要方面。 擁有正確的工具可以節(jié)省大量時間和頭痛。 在GWT Super Dev模式之前，經(jīng)典的Dev模式允許使用JVM調(diào)試。 開發(fā)人員可以在其IDE中設(shè)置斷點，并使用調(diào)試模式來跟蹤錯誤和錯誤。 現(xiàn)在，在超級開發(fā)模式下，情況有所不同。 整個應(yīng)用程序都已編譯并在瀏覽器中運行，因此無法再使用JVM調(diào)試。 想到的問題是：是否可以在瀏覽器中調(diào)試Java？ 幸運的是，答案是肯定的。
原則上，瀏覽器只能運行和調(diào)試javascript。 為了克服此缺點，引入了源地圖。 源圖充當(dāng)從源語言到目標語言的映射的藍圖。 源映射可以用于多種語言，甚至可以在最小化和未最小化的javascript之間進行映射。 在本文中，我們將使用源地圖和Chrome開發(fā)工具來調(diào)試應(yīng)用程序錯誤。 我們將以遇到運行時錯誤的Polymer-starter-kit為例。 錯誤如下

該錯誤不會破壞應(yīng)用程序，但重要的是要知道導(dǎo)致它的原因。

沒有源圖：

如果我們嘗試在不啟用源映射的情況下訪問源代碼，則將無法在源代碼中指出錯誤發(fā)生的位置。

啟用源地圖：

為了克服這個問題，我們需要激活源地圖。 可以在Chrome上通過轉(zhuǎn)到設(shè)置->源->啟用JavaScript源地圖來激活源地圖。 通常，默認情況下，源映射是由GWT編譯器生成的。 如果沒有，在.gwt.xml中設(shè)置以下屬性可以激活它們：

啟用斷點后，我們可以看到該錯誤現(xiàn)在指向.java文件而不是.js文件：

設(shè)置斷點：

現(xiàn)在我們看到了錯誤發(fā)生的位置，我們可以設(shè)置一個斷點來檢查應(yīng)用程序的狀態(tài)。 可以通過在編輯器中單擊行號來簡單地設(shè)置斷點。

跟蹤錯誤：

最后，我們可以刷新應(yīng)用程序。 到達斷點時，應(yīng)用程序?qū)⑼Ｖ埂?然后，我們可以檢查調(diào)用堆棧和變量值。

現(xiàn)在我們知道錯誤完全在代碼中發(fā)生了。 我們可以檢查我們是否濫用了聲明。 在這種情況下，刪除無用的這一行就足夠了。

使用Chrome工作區(qū)（可選）

Chrome工作區(qū)允許將瀏覽器加載的文件映射到磁盤上的文件，并直接對Chrome中的文件進行更改。 如果不需要IDE輔助并且不想從瀏覽器到IDE來回切換，這將很有用。 要使用Chrome工作區(qū)，您可以右鍵單擊左側(cè)“源”選項卡上的空白處，然后單擊“將文件夾添加到工作區(qū)”。 然后，您可以右鍵單擊打開的文件，然后單擊“映射到文件系統(tǒng)資源”。 有關(guān)更多信息，請訪問： https ： //developers.google.com/web/tools/setup/setup-workflow

包起來：

使用源映射在瀏覽器中調(diào)試GWT應(yīng)用可以節(jié)省大量時間，并有助于正確跟蹤錯誤。 Chrome Dev工具提供了功能強大的調(diào)試工具，可以幫助提高生產(chǎn)率并快速解決錯誤。 Chrome開發(fā)工具提供了更高級的調(diào)試功能，例如調(diào)試HTTP請求和DOM更改，如果您想瀏覽這些請求，可以轉(zhuǎn)到Google的用戶指南： https : //developers.google.com/web/tools/ chrome-devtools / javascript / breakpoints

值得一看的： DevTools：2017年國際聯(lián)盟（Google I / O '17）

翻譯自: https://www.javacodegeeks.com/2017/07/quick-tip-debugging-gwt-application-using-chrome-dev-tools.html

總結(jié)

以上是生活随笔為你收集整理的快速提示：使用Chrome开发工具调试GWT应用程序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。