How to debug javascript while it is part of html source

Having problems with building or using CEF's C/C++ APIs? This forum is here to help. Please do not post bug reports or feature requests here.

How to debug javascript while it is part of html source

Postby jiaojiao » Mon Nov 28, 2016 3:08 am

Hi All,

I would like to debug the javascript functions that are contained in the html content. However, when I set a break point on the function fReload, it never breaks.
Code: Select all
<!DOCTYPE html>
<html>

<head>
   <title>JS Test</title>
</head>

<body>

<p>JavaScript Test</p>
<button onclick="fReload()">Reload</button>
<button onclick="fCancel()">Cancel</button>

<script>
function fReload() {
    window.unifaceTriggers('reloadPage');
}
function fCancel() {
    window.unifaceTriggers('exitForm');
}
</script>

</body>

</html>


And if I create a separate js file for the jasvascript functions, then I can debug the functions. How does the DevTool debug js function exactly? Should they have to be in a js file separately to be debugable?

Thanks,
jiaojiao
jiaojiao
Techie
 
Posts: 44
Joined: Thu Jun 11, 2015 3:24 am

Re: How to debug javascript while it is part of html source

Postby digory » Mon Nov 28, 2016 11:29 am

I tried this in my application that uses CEF. It works pretty much the same way how it does in Chrome. Even source maps derived from TypeScript sources seem to work.

How did you open the window? In my application, it is opened with browser->GetHost()->ShowDevTools(). Remember, besides using manual breakpoints, you can also explicitly drop into the debugger by adding the statement debugger; somewhere in your JavaScript sources. Doesn't that work either?
digory
Expert
 
Posts: 118
Joined: Wed Oct 26, 2016 3:13 am

Re: How to debug javascript while it is part of html source

Postby jiaojiao » Tue Nov 29, 2016 9:40 am

It would be the method to load the content.

I have used in the code two methods to load the content. One is LoadURL to purely load the URL. Another method is to load html content via GetResourceHandler and load the content with the format "text/html".

The same source, if I load it through LoadURL via some file://. Then I can debug the javascript. If I load it through GetResourceHandler, I cannot debug the javascript.

The DevTools I start is the same as you have by browser->GetHost()->ShowDevTools().
jiaojiao
Techie
 
Posts: 44
Joined: Thu Jun 11, 2015 3:24 am


Return to Support Forum

Who is online

Users browsing this forum: No registered users and 85 guests