问题
I want to debug my javascript code and able to successfully place breakpoints at required places under sources tab.
However, I have run into an issue where I want to debug my inline javascript code. Do we have any chrome debugging tool feature using which I can debug my inline javascript code.
I am fine with using Firebug too for debugging purpose.
PS: By inline javascript code, I mean JS code inside body tag and in the same file.
回答1:
Another way can be using the dynamic script method. Chrome provides simple parser command which can tag dynamically loaded JS.
<script type="text/javascript">
[...]
//# sourceURL=dynamicScript.js
</script>
This line tells the chrome debugger that this whole script inside the script tag should be interpreted as a dynamicScript.js file. You can find the file on the debugger list and easily set up breakpoints or check the code.
Note : @ is replaced by # to avoid errors on unsupported browsers
Breakpoints in Dynamic JavaScript
回答2:
I have found the solution. We can put breakpoints on inline javascript too.
Solution:
- Go to source tab in chrome dev tool and you can see all the sources there.
- Your HTML code will be present with similar directory structure as it is followed in your URL.
- And then you can open your HTML and place breakpoint in your inline javascript code
回答3:
@blunderboy If you have following type of JS includes inside your BODY tag it will never show up in your directory structure, so in that case your solution wont work.
<div>
<script src="myJSfile.js">
</script>
</div>
this happens in jquery mobile where everything outside a page div is not loaded, so you have to include JS inside the page div.
I would have marked answer by @fazzyx as correct answer as that is how at least chrome would show even those included files.
来源：https://stackoverflow.com/questions/16593333/how-to-add-breakpoints-in-your-inline-javascript-in-chrome