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.
Related
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.
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 put up a code for commenting box on my html file for the visitors to comment on something in my website, and the code is provided from a website that offers it for free.
The problem is, the commenting box is visible and functions perfectly on Internet Explorer, but in Google Chrome Browser, or FireFox Browser, the commenting box doesn't even appear on the screen. When i view source by right-clicking, the code is still there, but does not show on the screen, and I think something is wrong with the code.
I have tried to fix this myself, and I could not figure this out alone.
Here is the code that was provided from the free commenting box website.
<div class="js-kit-comments" backwards="yes" paginate="10"></div>
<script src="http://js-kit.com/comments.js"></script>
I wish i could provide more code, but honestly, this is basically it.
I really hope you guys can help me out on this one. Thank you in advance.
The big js code isn't made to be compatible.
First line :
try { if(!window.JSK$EPB && navigator.appVersion.match(/[345]\.[.0-9 ]+Safari/)) {
This is not the task of SO to adapt and/or debug a big proprietary script in the blind.
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 a quick question on Coda. Not sure if this for this website but i'm sure someone here will tell me. Does Coda have javascript error recognition like dreamweaver does or is there a plug-in for it. I keep having to switch dreamweaver to test stuff and I'd really like to stop doing that.
Thanks.
Coda's 'preview' mode uses Webkit, and therefore has essentially the same Javascript debugging and error recognition capabilities as Chrome's and Safari's Developer Tools.
In Coda, go to Preview mode. Right click, and 'inspect element'. Then, click on the Scripts panel. You should be able to find what you need there.