devtools.md

DevTool

• DevTool
  • DevTools On Windows
  • DevTools on All Platforms

DevTools On Windows

On Windows, if debug mode is enabled, Chromely provides 2 command context menu items:

• Show DevTools
  • Launches Chromium in-built DevTool window.
• Close DevTools
  • Closes the DevTool window if opened.

This context menu option is only availble in Windows and available if debug mode is selected.

Debug mode in config file:

    "debuggingMode": true

Debug mode in config code:

    var config = DefaultConfiguration.CreateForRuntimePlatform();
    config.DebuggingMode = true;

The context menu is provided via CEF/CefGlue's ContextMenuHandler. Chromely provides a default implementation of ContextMenuHandler but it is configurable.

To conigure the DevTools menu, register a new custom ContextMenuHandler:

    public class CusomChromelyApp : ChromelyBasicApp
    {
          public override void ConfigureServices(ServiceCollection services)
        {
            base.ConfigureServices(services);
            services.AddSingleton<CefContextMenuHandler, CustomCustomContextMenuHandlerDragHandler>();
        }
    }

    public class CustomContextMenuHandler : CefContextMenuHandler
    {
    }

The default handler screenshots:

DevTools on All Platforms

The DevTools context menu is not available on Linux and MacOS. Developers who are interested can look into developing one for Linux or MacOS but will not be supported.

For all platforms the Demo, Demo-Angular, Demo-React and Demo-Vue provide ways to launch the DevTools window in the OS default browser.

This requires a Command implementation:

      <a class="dropdown-item" onclick="showDevTools()">Show DevTools</a>

    function showDevTools() {
        var url = "http://command.com/democontroller/showdevtools";
        var link = document.createElement('a');
        link.href = url;
        document.body.appendChild(link);
        link.click(); 
    }

.. and Controller code:

    [Command(Route = "/democontroller/showdevtools")]
    public void ShowDevTools(IDictionary<string, string> queryParameters)
    {
        if (_config != null && !string.IsNullOrWhiteSpace(_config.DevToolsUrl))
        {
            BrowserLauncher.Open(_config.Platform, _config.DevToolsUrl);
        }
    }

Alternatively the developer can manually launch in the browser using the DevTool url.

Usually it is: http://127.0.0.1:20480 but the actual value can be found by:

    var config = DefaultConfiguration.CreateForRuntimePlatform();
    .....
    var devtoolsUrl = DevToolsUrl;

The DevTools screenshots: