chromelyapps / Chromely

Build Cross Platform HTML Desktop Apps on .NET using native GUI, HTML5, JavaScript, CSS, Owin, AspNetCore (MVC, RazorPages, Blazor)
MIT License
2.98k stars 280 forks source link

Dev tools #49

Closed sambengtson closed 5 years ago

sambengtson commented 5 years ago

Is it possible to open chrome dev tools for debugging?

sambengtson commented 5 years ago

It appears that all web logs are outputted to the dot net console that runs alongside the browser frame 👍

sambengtson commented 5 years ago

I'm going to re-open. The more I think about it, it would be really nice to debug the JS side with chrome dev tools. I'm trying to figure out how to get a handle on the CEF browser to make this happen.

mattkol commented 5 years ago

Sorry about that, I forgot to update a file which broke that. This is now fixed.

The default context menu lets you launch the DevTool if you are in debug mode. However this is customizable. You can either permanently set the mode to debug or register a new context menu handler.

  1. Setting debug mode
ChromelyConfiguration config = ChromelyConfiguration
                              .Create()
                              .WithDebuggingMode(true)
                              -----
CefGlueSchemeHandlerFactory());
  1. Register new handler

image

image

ioandev commented 5 years ago

Just tried this with the demo setup from the tutorial.

Adding a breakpoint in the javascript from the devtools freezes the entire app - including the devtools itself. It is impossible to go past the breakpoint.

Also the app exits when pressing F12. Didn't use CefGlueSchemeHandlerFactory. Adding debugger in the JS file has the same result.

How can I get around this?

image

mattkol commented 5 years ago

Any reason for removing CefGlueSchemeHandlerFactory? Did you replace it with a custom implementation?

CEF is multi-process and can be difficult to debug. The advise is to set it to SingleProcess for ease of debugging. So yes it is easy to get into an unstable state when you debug in multi-process, multi-threaded setup. Note also that going forward with newer versions SingleProcess will be removed

My advise is to run any of the demos as-is and gradually make changes to it, until you get familiar with what is needed and what is not.

F12 exiting app? I have never seen that before. You can trap key event by registering a custom KeyHandler to see what is happening under the hood. Please see Configuration wiki page on how to do that - https://github.com/mattkol/Chromely/wiki/Configuration#how-to-add-custom-handlers

Thanks.

On Fri, Dec 7, 2018 at 2:01 PM Ioan Biticu notifications@github.com wrote:

Just tried this with the demo setup from the tutorial.

Adding a breakpoint in the javascript from the devtools freezes the entire app - including the devtools itself. It is impossible to go past the breakpoint.

Also the app exits when pressing F12. Didn't use CefGlueSchemeHandlerFactory. Adding debugger in the JS file has the same result.

How can I get around this?

[image: image] https://user-images.githubusercontent.com/9282777/49669730-246e2900-fa5a-11e8-811c-aa011e47d243.png

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/mattkol/Chromely/issues/49#issuecomment-445349036, or mute the thread https://github.com/notifications/unsubscribe-auth/ARiFTyW-h6PC9rUhkw0Hg0Zz1NDtAQiLks5u2skrgaJpZM4YeDol .

ioandev commented 5 years ago

I didn't remove CefGlueSchemeHandlerFactory, never added it.

Just ran the code from https://github.com/mattkol/Chromely/wiki/dotnet-cli-Starter-Template

My Program.cs's Main is:

           try
            {
                HostHelpers.SetupDefaultExceptionHandlers();
                string startUrl = "local://app/chromely.html";
                ChromelyConfiguration config = ChromelyConfiguration
                                              .Create()
                                              .WithAppArgs(args)
                                              .WithHostSize(1200, 900)
                                              .WithLogFile("logs\\chromely.cef_new.log")
                                              .WithStartUrl(startUrl)
                                              .WithLogSeverity(LogSeverity.Info)
                                              .UseDefaultLogger("logs\\chromely_new.log")
                                              .UseDefaultResourceSchemeHandler("local", string.Empty)
                                              .UseDefaultHttpSchemeHandler("http", "chromely.com")
                                              .WithCustomSetting(CefSettingKeys.SingleProcess, true)
                                              .WithDebuggingMode(true) // <!-- added this
                                              ;

                var factory = WinapiHostFactory.Init("chromely.ico");
                using (var window = factory.CreateWindow(
                    () => new CefGlueBrowserHost(config),
                    "chromely",
                    constructionParams: new FrameWindowConstructionParams()))
                {
                    window.RegisterUrlScheme(new UrlScheme("https://github.com/mattkol/Chromely", true));

                    window.RegisterServiceAssembly(Assembly.GetExecutingAssembly());

                    string serviceAssembliesFolder = @"C:\ChromelyDlls";
                    window.RegisterServiceAssemblies(serviceAssembliesFolder);

                    // Scan assemblies for Controller routes 
                    window.ScanAssemblies();

                    window.SetSize(config.HostWidth, config.HostHeight);
                    window.CenterToScreen();
                    window.Show();
                    return new EventLoop().Run(window);
                }
            }
            catch (Exception exception)
            {
                Log.Error(exception);
            }

            return 0;

Demo: https://www.youtube.com/watch?v=WFAh7NRv1Ms

Swapping .WithCustomSetting(CefSettingKeys.SingleProcess, true) with .WithCustomSetting(CefSettingKeys.MultiThreadedMessageLoop, true) results in:

Run 'dotnet [command] --help' for more information on a command.
[1209/150943.246:ERROR:browser_gpu_channel_host_factory.cc(119)] Failed to launch GPU process.
[1209/150943.247:ERROR:gpu_process_transport_factory.cc(1017)] Lost UI shared context.
Unknown option: --type=gpu-process
Unknown option: --no-sandbox
Unknown option: --locales-dir-path=C:\Users\Alex\Documents\Projects\totalaccess\Chromely\bin\x64\Debug\netcoreapp2.1\locales
Unknown option: --log-file=logs\chromely.cef_new.log
Unknown option: --log-severity=info
Unknown option: --resources-dir-path=C:\Users\Alex\Documents\Projects\totalaccess\Chromely\bin\x64\Debug\netcoreapp2.1
Unknown option: --lang=en-US
Unknown option: --gpu-preferences=KAAAAAAAAACAAwCAAQAAAAAAAAAAAGAAEAAAAAAAAAAAAAAAAAAAACgAAAAEAAAAIAAAAAAAAAAoAAAAAAAAADAAAAAAAAAAOAAAAAAAAAAQAAAAAAAAAAAAAAAKAAAAEAAAAAAAAAAAAAAACwAAABAAAAAAAAAAAQAAAAoAAAAQAAAAAAAAAAEAAAALAAAA
Unknown option: --use-gl=swiftshader-webgl
Unknown option: --locales-dir-path=C:\Users\Alex\Documents\Projects\totalaccess\Chromely\bin\x64\Debug\netcoreapp2.1\locales
Unknown option: --log-file=logs\chromely.cef_new.log
Unknown option: --log-severity=info
Unknown option: --resources-dir-path=C:\Users\Alex\Documents\Projects\totalaccess\Chromely\bin\x64\Debug\netcoreapp2.1
Unknown option: --lang=en-US
Unknown option: --service-request-channel-token=B24C72A32A369A40C0AB467B2A8AF365
Unknown option: --mojo-platform-channel-handle=1848
.NET Command Line Tools (2.1.500)
Usage: dotnet [runtime-options] [path-to-application] [arguments]

Thanks, Ioan

mattkol commented 5 years ago

Lets take it one step at a time.

You intend to run on .NET Core or .NET? Does it work as expected before the swapping?

MultiThreadedMessageLoop has to do with how CEF communicates with the hosting application and its controls. In this case setting it to true is redundant. I doubt if you make it false that the app will work. This is left there for super users to play with. I will suggest not to make changes to that.

See CefSharp explanation here - https://cefsharp.github.io/api/63.0.0/html/P_CefSharp_CefSettings_MultiThreadedMessageLoop.htm

If you are just getting started with Chromely, I will suggest .NET first. .NET Core is tricky. The error you are getting is likely because you removed SingleProcess. The template was intentionally made SingleProcess because it helps with a quick start. And as I noted earlier that is now no longer supported. I am just changing the wiki to reflect that - https://github.com/mattkol/Chromely/wiki/Upgrade-to-CefGlue-v68-and-CefSharp-v67

If you want to debug without running into thread issues, please, stay on SingleProcess, that is what CEF team advises. To run MultiProcess successfully on .NET Core, you have to publish it, and that means you may not be able to successfully debug. I am looking into creating a CefGlue subproces to help with that, but that may not be ready for prime time until a couple of weeks of developing and testing on my side.

Please see wiki on Winapi .NET Core for more info. Down the list is how to publish. https://github.com/mattkol/Chromely/wiki/Getting-Started-CefGlue-Winapi-(.NET-Core) .

First please let's determine the demo run as-is, before debugging. That way I can help reproduce what may have been changes from you.

Thanks.

On Sun, Dec 9, 2018 at 9:13 AM Ioan Biticu notifications@github.com wrote:

I didn't remove CefGlueSchemeHandlerFactory, never added it.

Just ran the code from https://github.com/mattkol/Chromely/wiki/dotnet-cli-Starter-Template

My Program.cs's Main is:

       try
        {
            HostHelpers.SetupDefaultExceptionHandlers();
            string startUrl = "local://app/chromely.html";
            ChromelyConfiguration config = ChromelyConfiguration
                                          .Create()
                                          .WithAppArgs(args)
                                          .WithHostSize(1200, 900)
                                          .WithLogFile("logs\\chromely.cef_new.log")
                                          .WithStartUrl(startUrl)
                                          .WithLogSeverity(LogSeverity.Info)
                                          .UseDefaultLogger("logs\\chromely_new.log")
                                          .UseDefaultResourceSchemeHandler("local", string.Empty)
                                          .UseDefaultHttpSchemeHandler("http", "chromely.com")
                                          .WithCustomSetting(CefSettingKeys.SingleProcess, true)
                                          .WithDebuggingMode(true) // <!-- added this
                                          ;

            var factory = WinapiHostFactory.Init("chromely.ico");
            using (var window = factory.CreateWindow(
                () => new CefGlueBrowserHost(config),
                "chromely",
                constructionParams: new FrameWindowConstructionParams()))
            {
                window.RegisterUrlScheme(new UrlScheme("https://github.com/mattkol/Chromely", true));

                window.RegisterServiceAssembly(Assembly.GetExecutingAssembly());

                string serviceAssembliesFolder = @"C:\ChromelyDlls";
                window.RegisterServiceAssemblies(serviceAssembliesFolder);

                // Scan assemblies for Controller routes
                window.ScanAssemblies();

                window.SetSize(config.HostWidth, config.HostHeight);
                window.CenterToScreen();
                window.Show();
                return new EventLoop().Run(window);
            }
        }
        catch (Exception exception)
        {
            Log.Error(exception);
        }

        return 0;```

Demo: https://www.youtube.com/watch?v=WFAh7NRv1Ms

Swapping .WithCustomSetting(CefSettingKeys.SingleProcess, true) with .WithCustomSetting(CefSettingKeys.MultiThreadedMessageLoop, true) results in:

Run 'dotnet [command] --help' for more information on a command. [1209/150943.246:ERROR:browser_gpu_channel_host_factory.cc(119)] Failed to launch GPU process. [1209/150943.247:ERROR:gpu_process_transport_factory.cc(1017)] Lost UI shared context. Unknown option: --type=gpu-process Unknown option: --no-sandbox Unknown option: --locales-dir-path=C:\Users\Alex\Documents\Projects\totalaccess\Chromely\bin\x64\Debug\netcoreapp2.1\locales Unknown option: --log-file=logs\chromely.cef_new.log Unknown option: --log-severity=info Unknown option: --resources-dir-path=C:\Users\Alex\Documents\Projects\totalaccess\Chromely\bin\x64\Debug\netcoreapp2.1 Unknown option: --lang=en-US Unknown option: --gpu-preferences=KAAAAAAAAACAAwCAAQAAAAAAAAAAAGAAEAAAAAAAAAAAAAAAAAAAACgAAAAEAAAAIAAAAAAAAAAoAAAAAAAAADAAAAAAAAAAOAAAAAAAAAAQAAAAAAAAAAAAAAAKAAAAEAAAAAAAAAAAAAAACwAAABAAAAAAAAAAAQAAAAoAAAAQAAAAAAAAAAEAAAALAAAA Unknown option: --use-gl=swiftshader-webgl Unknown option: --locales-dir-path=C:\Users\Alex\Documents\Projects\totalaccess\Chromely\bin\x64\Debug\netcoreapp2.1\locales Unknown option: --log-file=logs\chromely.cef_new.log Unknown option: --log-severity=info Unknown option: --resources-dir-path=C:\Users\Alex\Documents\Projects\totalaccess\Chromely\bin\x64\Debug\netcoreapp2.1 Unknown option: --lang=en-US Unknown option: --service-request-channel-token=B24C72A32A369A40C0AB467B2A8AF365 Unknown option: --mojo-platform-channel-handle=1848 .NET Command Line Tools (2.1.500) Usage: dotnet [runtime-options] [path-to-application] [arguments]

Thanks, Ioan

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/mattkol/Chromely/issues/49#issuecomment-445545692, or mute the thread https://github.com/notifications/unsubscribe-auth/ARiFT068tI6Sq7lmsOlAk73NhND-e3mpks5u3Si1gaJpZM4YeDol .