调试是软件开发的重要方面。 拥有正确的工具可以节省大量时间和头痛。 在GWT Super Dev模式之前，经典的Dev模式允许使用JVM调试。 开发人员可以在其IDE中设置断点，并使用调试模式来跟踪错误和错误。 现在，在超级开发模式下，情况有所不同。 整个应用程序都已编译并在浏览器中运行，因此无法再使用JVM调试。 想到的问题是：是否可以在浏览器中调试Java？ 幸运的是，答案是肯定的。
原则上，浏览器只能运行和调试javascript。 为了克服此缺点，引入了源地图。 源图充当从源语言到目标语言的映射的蓝图。 源映射可以用于多种语言，甚至可以在最小化和未最小化的javascript之间进行映射。 在本文中，我们将使用源地图和Chrome开发工具来调试应用程序错误。 我们将以遇到运行时错误的Polymer-starter-kit为例。 错误如下

该错误不会破坏应用程序，但重要的是要知道导致它的原因。

没有源图：

如果我们尝试在不启用源映射的情况下访问源代码，则将无法在源代码中指出错误发生的位置。

启用源地图：

为了克服这个问题，我们需要激活源地图。 可以在Chrome上通过转到设置->源->启用JavaScript源地图来激活源地图。 通常，默认情况下，源映射是由GWT编译器生成的。 如果没有，在.gwt.xml中设置以下属性可以激活它们：

启用断点后，我们可以看到该错误现在指向.java文件而不是.js文件：

设置断点：

现在我们看到了错误发生的位置，我们可以设置一个断点来检查应用程序的状态。 可以通过在编辑器中单击行号来简单地设置断点。

跟踪错误：

最后，我们可以刷新应用程序。 到达断点时，应用程序将停止。 然后，我们可以检查调用堆栈和变量值。

现在我们知道错误完全在代码中发生了。 我们可以检查我们是否滥用了声明。 在这种情况下，删除无用的这一行就足够了。

使用Chrome工作区（可选）

Chrome工作区允许将浏览器加载的文件映射到磁盘上的文件，并直接对Chrome中的文件进行更改。 如果不需要IDE辅助并且不想从浏览器到IDE来回切换，这将很有用。 要使用Chrome工作区，您可以右键单击左侧“源”选项卡上的空白处，然后单击“将文件夹添加到工作区”。 然后，您可以右键单击打开的文件，然后单击“映射到文件系统资源”。 有关更多信息，请访问： https ： //developers.google.com/web/tools/setup/setup-workflow

包起来：

使用源映射在浏览器中调试GWT应用可以节省大量时间，并有助于正确跟踪错误。 Chrome Dev工具提供了功能强大的调试工具，可以帮助提高生产率并快速解决错误。 Chrome开发工具提供了更高级的调试功能，例如调试HTTP请求和DOM更改，如果您想浏览这些请求，可以转到Google的用户指南： https : //developers.google.com/web/tools/ chrome-devtools / javascript / breakpoints

值得一看的： DevTools：2017年国际联盟（Google I / O '17）

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