ChatGPT解决这个技术问题 Extra ChatGPT

How to set breakpoints in inline Javascript in Google Chrome?

When I open Developer Tools in Google Chrome, I see all kinds of features like Profiles, Timelines, and Audits, but basic functionality like being able to set breakpoints both in js files and within html and javascript code is missing! I tried to use the javascript console, which itself is buggy - for example, once it encounters a JS error, I cannot get out of it unless I refresh the whole page. Can someone help?

I gave up with Chrome. Tried with Firefox and had my breakpoint hit within a few seconds. It may be possible with Chrome but it's certainly not obvious how!
@OliverP I also suggest trying Firefox when things sometimes don't work in Chrome. I have some inline scripts in a .php file and Chrome just couldn't show the source file in Source Tab of Chrome devtool. I tried Firefox and everything works as expected.

M
Matt Ball

Are you talking about code within <script> tags, or in the HTML tag attributes, like this?

<a href="#" onclick="alert('this is inline JS');return false;">Click</a>

Either way, the debugger keyword like this will work:

<a href="#" onclick="debugger; alert('this is inline JS');return false;">Click</a>

N.B. Chrome won't pause at debuggers if the dev tools are not open.

You can also set property breakpoints in JS files and <script> tags:

Click the Sources tab Click the Show Navigator icon and select the a file Double-click the a line number in the left-hand margin. A corresponding row is added to the Breakpoints panel (4).

https://i.stack.imgur.com/gAp7V.png


There is no Scripts tab. I see all other tabs that are in this picture but no Scripts tab !.
I mean being able to set breakpoint within scrip tag in html. I also tried using debugger; keyword but it does not work. Chrome does not breakpoint on that but it works in Firefox. I am looking for breakpoint solution not based on debugger keyword which is inconvenient to put in lot of places in code and then having to delete.
In the drop-down under the Scripts tab I only see JS files listed, but not HTML files that contain the