Note: Advice in this article will only work for JxBrowser 6. See the corresponding article for JxBrowser 7 here.(注意:本文中的建议仅适用于JxBrowser6,JxBrowser7相应文章请点击这里。)


JxBrowser provides functionality that allows you to use the Chrome Developer Tools remote debugging feature. To enable this feature you must define the --remote-debugging-port Chromium switch by calling the BrowserPreferences.setChromiumSwitches(String...) method before creating any Browser instance.(JxBrowser提供的功能可让您使用Chrome开发者工具的远程调试功能。要启用此功能,必须在创建任何浏览器实例之前通过调用BrowserPreferences.setChromiumSwitches(String ...)方法来定义--remote-debugging-port Chromium开关。)

Once you configured JxBrowser to use a specified remote debugging port, you can get a remote DevTools URL by calling the Browser.getRemoteDebuggingURL() method: (将JxBrowser配置为使用指定的远程调试端口后,可以通过调用Browser.getRemoteDebuggingURL()方法来获取远程DevTools URL:)

BrowserPreferences.setChromiumSwitches("--remote-debugging-port=9222");

Browser browser = new Browser();
browser.loadURL("http://www.google.com");
String remoteDebuggingURL = browser.getRemoteDebuggingURL();

The remoteDebuggingURL you can load in another Browser instance to open Chrome Developer Tools page that allows inspecting HTML, debugging JavaScript etc.(您可以在另一个浏览器实例中加载的remoteDebuggingURL来打开Chrome开发者工具页面,该页面允许检查HTML,调试JavaScript等。)


Note: Do not open the remote debugging URL in other web browser applications such as Mozilla FireFox, MS IE, etc. This will lead to a native crash in Chromium DevTools web server. The remote debugging feature is compatible only with the Chromium version that equals to the version used by JxBrowser library. For example, if you use JxBrowser 6.21 based on Chromium 69.0.3497.12, then you can open remote debugging URL in Google Chrome/Chromium 69.0.3497.12 only. We recommend that you always load the remote debugging URL in another Browser instance instead of Google Chrome.(注意:请勿在其他Web浏览器应用程序(例如Mozilla FireFox,MS IE等)中打开远程调试URL。这将导致Chromium DevTools Web服务器中的本机崩溃。远程调试功能仅与Chromium版本兼容,该版本与JxBrowser库使用的版本相同。例如,如果您使用基于Chromium 69.0.3497.12的JxBrowser 6.21,则只能在Google Chrome / Chromium 69.0.3497.12中打开远程调试URL。我们建议您始终在另一个浏览器实例而不是Google Chrome中加载远程调试URL。)

import com.teamdev.jxbrowser.chromium.Browser;
import com.teamdev.jxbrowser.chromium.BrowserPreferences;
import com.teamdev.jxbrowser.chromium.swing.BrowserView;

import javax.swing.*;
import java.awt.*;

/**
 * This sample demonstrates how to use Chromium remote debugging feature.
 */
public class RemoteDebuggingSample {

    public static void main(String[] args) {
        // Specifies remote debugging port for remote Chrome Developer Tools.
        BrowserPreferences.setChromiumSwitches("--remote-debugging-port=9222");

        Browser browser1 = new Browser();
        BrowserView browserView1 = new BrowserView(browser1);

        // Gets URL of the remote Developer Tools web page for browser1 instance.
        String remoteDebuggingURL = browser1.getRemoteDebuggingURL();

        JFrame frame1 = new JFrame();
        frame1.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
        frame1.add(browserView1, BorderLayout.CENTER);
        frame1.setSize(700, 500);
        frame1.setLocationRelativeTo(null);
        frame1.setVisible(true);

        browser1.loadURL("http://www.google.com");

        // Creates another Browser instance and loads the remote Developer
        // Tools URL to access HTML inspector.
        Browser browser2 = new Browser();
        BrowserView browserView2 = new BrowserView(browser2);

        JFrame frame2 = new JFrame();
        frame2.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
        frame2.add(browserView2, BorderLayout.CENTER);
        frame2.setSize(700, 500);
        frame2.setLocationRelativeTo(null);
        frame2.setVisible(true);

        browser2.loadURL(remoteDebuggingURL);
    }
}

If you run the example above you will see two windows. One window displays Google web page, the other one displays Developer Tools:(如果运行上面的示例,您将看到两个窗口。一个窗口显示Google网页,另一个窗口显示开发人员工具:)