I am using chrome's dev tools to debug an application.I was wondering how can i hide the empty lines that appear in a Javascript file.To be more specific,in the sources pane,i can see the javasript that accompanies the html page.There is a huge gap from line 2001 to 3454 and then there is javascript code again.I would like to make the code read better,so i would prefer not to view the empty lines.It this possible?
Thank You.
You can try the Pretty Print option at the bottom of Chrome's dev tools:
If you have trouble trying to read and debug minified JavaScript in
the DevTools, a pretty printing option is available to make life
easier.
...by clicking on the curly brace ("Pretty Print") icon in the
bottom left corner, the JavaScript is transformed into a more human
readable form. This is also more easy for debugging and setting
breakpoints.
Related
I am a new web developer and just started working. i am doing debugging and fixing errors now. so the website is so huge and i have access to the whole code. if i get an issue saying fix heading "my heading" to "my own heading", its easy to locate where the code is by doing a search on the code editor like visual code, but how do i know where exactly is that "my heading" is on the website. i tried development tool, it is limited due to alot of code is traspiled so code on editor and development tool is not the same. is there a solution ? it is killing alot of time, asking co workers all the time seems not right either .
to fix errors of html you can use this web site: https://validator.w3.org/
Have you try to use "Console" direct from the browser? if you use chrome, you can run the code inspector by doing right click on the webpage and there you can search for specific line of code, tag, and so on, or modify right there on the inspector the java code and run it to see if its working properly.
Hope it helps, regards.
The current project I am working on builds a page's javascript code based on some conditions. All the code works but when I go to the Developer Tools to see it, it is not showing. Or more like it is truncated and 3 dots added at the end.
It seems to be a change with the recent update. It is extremely annoying to not be able to see everything. Does anyone know how to make it show everything? If it helps, I'm working on a mac. Thanks.
Chrome Version 42.0.2311.152 (64-bit)
If you right click on the <script> tag and select "Edit as HTML", you'll be able to access the whole script, without the hyphenation.
I've been working on a Chrome extension and I have a minor annoyance with debugging my scripts. My background page is a Javascript file and it is always minified automatically by Chrome. You can see how this becomes a pain to use the developer tools on because everything is on a single line. Anyone know if this can be disabled?
To view your Chrome extension source normally:
1 open Chrome's extension management page
2 make sure developer mode is checked
3 click link after inspect views to open extension files in chrome developer tools window
4 click link to included script file in background page to view background script
Perhaps this is relevant.
http://www.elijahmanor.com/7-chrome-tips-developers-designers-may-not-know/
The ability to Pretty Print ( a.k.a. unminify ) JavaScript source
Sometimes I'm trying to figure out a bug and unfortunately the JavaScript that was included has been minified. As you are aware trying to debug a minified file is nearly impossible. How do you set a break point on a line that is a bazillion characters long?
Thankfully Chrome has a Pretty Print feature that will take a minified JavaScript file and format it property. All you need to do is to click the "{ }" icon on the bottom toolbar to activate this feature. Of course the names will still be obfuscated ( depending on what program minfied the JavaScript in the first place ), but you will at least be able to set break points and debug the code.
I can use chrome's "inspect element" feature to view and debug my javascript, but only if it has successfully loaded. If the script has a parsing error then it doesn't load and isn't shown via "inspect element".
How can I get chrome to show me its attempt to parse my script and a list of errors it has encountered?
I'm a newb to both chrome extensions and javascript, so apologies if I'm missing something obvious.
In the toolbar at the top of the Web Inspector (the window/pane that pops up when you "Inspect Element") click on the right-most button/tab, "Console," as seen here:
Not only will this show you all of the errors the page generates (JavaScript and others), it's also a full JavaScript REPL so you can interact with the page by entering any JavaScript you want.
Jordan has the right answer (should have seen that, I knew it was a newb question!), but while I was searching I also came across JSLint, which is quite useful. It's stricter than the chrome execution engine, so it generates a bunch of warnings you may not need to worry about, but still handy.
I have downloaded and installed IE8. I was playing around with the debugger, but I could not figure out how to load external javascript files. It displays the javascript from the main page, but I need to debug the script in the external files. I have googled various articles that show a screenshot of an IE8 debugger with a drop-down for selecting which script to debug, but my debugger does not feature this. Can anyone help me with this? Thanks.
Here is what I am seeing when I open up IE8. You just click the URL and it brings up a list of all scripts, which you can then click to load. If for some reason your browser is not showing the Script tab, maybe you should uninstall and reinstall it.
If the toolbar isn't wide enough (at least 800 at 92dpi) then the drop down arrow will be hidden (you can still click on the main area though). You can change that size by shrinking the size of the console on the right hand side their is a horizontal splitter bar between the script and console panes just click and drag on it.