How to debug my code Ruby , Javascript, CSS? - javascript

I'm new to developing and started with a ruby on rails tutorial.
There i came to an error and after redoing it and googling it for days i can't figure it out. I was told to learn how to debug but i have no clue how to. i read that it actually is not possible to debug css. Maybe i used the wrong expression and i don't want to make it about my error which i already asked about here: CSS is not working after push to heroku but works on localhost
and here endless scrolling does not work
but i was wondering how to debug in general. i found various code snippets but not a really good tutorial where it explains everything from the beginning. i found things about breakpoints which i have no clue about what it is and where to set and how to read or where to get the logfile. do you know any good tutorials about that topic which i weren't able to find yet. something like a debugging for dummies.
Thanks a lot.

The Rails Guides site is an excellent resource for learning Rails.
Here's a great one on your subject: http://guides.rubyonrails.org/debugging_rails_applications.html -- section 3 goes into the debugger itself. Should really be all you need, but let me know if you've any specific questions after reading this.
Debugging CSS is different, though. Generally, the best way to debug CSS is to play with it in real time in a web page. You can do this with the Firebug addon for FireFox, or the web inspector which is built in to Chrome and Safari.

Debugging means finding and fixing problems with your code. You can start by checking your code for syntax errors (such as typos in function names or missing punctuation). Then use print statements (such as document.write in JavaScript) to check that your variables have the correct values. Also check for mistakes in logic, such as off-by-ones and infinite loops. Based on the unexpected results (and error message, if any), try to figure out which part of your code is faulty. You can debug without a debugger program, but they offer useful features. Your code can run slowly (line-by-line or pausing at the breakpoint), so after each line/breakpoint, you can check its status.

Related

JavaScript and CSS working in Dreamweaver but not in the browser

I have an html page and it is getting linked to jquery, javascript and css. This all works fine in Dreamweaver, but when I put it on a server or run the file locally, it doesn't work. I have run all 3 files through syntax checkers and there is nothing wrong with any of them.
I created a codepen and it seems to be working fine:
https://codepen.io/vishalkaului/pen/bYedPp
Possible problem could be in the path, please crosscheck.
Too much recursion? Wow. So, something in your code is going bonkers re-running itself. Does it give you a clue as to where the recursion is happening? If so, you'll need to trace the code and fix or limit the recursion. It may be the dreamweaver has a larger recursion stack, or some how "fixes" the recursion problem itself. This is why I don't develop in alternate environments than the actual target (in this case, a browser -- or do you have another reason for using dreamweaver?)
Sounds like dreamweaver is doing something "for you" that the regular environment isn't doing. Some js include, jQuery include, something like that. Some code post would help. And maybe you should use some console.log statements to see if jQuery is loaded up, or to see if you can establish how far your code is getting before failing. Are there any console messages at all, indicating errors or failures?

Firebug causes Firefox to be unresponsive

I'm a beginner web developer. I often use Firebug to debug my JavaScript.
Problem is that there are some script files from my page's UI that have a lot of code and this causes my web browser to be unresponsive, i.e. I get a dialog saying the script is unresponsive. Basically this happens when I am within Firebug's Script panel.
How can I deal with this?
I tried finding solution to this problem and nothing.
As for the answer I think the best was posted by #Pablo(can't assign answer to comment unfortunately) and it is simply trying out Google Chrome console. None of the problems I mentioned exists here.
Cheers guys!
I have had the same problem debugging some of our older scripts that make extensive use of the eval() function.
This causes many scripts to be displayed within the Script Location Menu. (Each dynamically generated script is represented there.)
A possible solution, given that it was caused by the number of files in my instance, might be to see if you can bypass the problem entirely by utilizing fewer source files for the same code. Using a 'built' version of whatever frameworks you use might alleviate the problem. (Particularly if they still are debug-able in a built form.)
If that does not work, you might try debugging using Firefox' built-in debugger (available via Ctrl+Shift+S. (Or switch to another browser to do the debugging, but that is obviously a far less desirable solution.)

Why does has my javascript stopped working on live site, but works fine in test environment?

Okay, this is very weird...
http://connecttofriends.com/admin/login
I'm writing an administration control panel and am using a template from Theme Forest (because I didn't sign on to create any graphics, so my client bought it). For the login page listed above, I had to program it to run through Javascript due to the way it was set up.
I got it working and everything. Suddenly, though, something bizarre happened, and Javascript has not worked on that page at all since. None of my Javascript will even appear in Firebug, and I haven't been able to find anything to suggest that there's a Javascript error. Worse yet... on my local test server, it works perfectly fine. It just refuses to work on the live server for whatever reason.
Has anything like this ever happened before? How can I possibly fix this? I can't find anything wrong, and it works fine on my test server. I've at least been able to continue development on the test server, but without the live version working its useless.
I'll post code if people ask, but I don't see much of a reason to under these circumstances because the code actually works.
Any help is appreciated...
jQuery doesn't load.
It tries to fetch jQuery from this address: http://connecttofriends.com/admin/js/jquery-1.7.min.js, and it's not there. Missing a /, to indicate root?
the path you using is not loading, why dont you use jquery link as https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js
this'll also reduce your server hits.
jquery library is not getting loaded.Please check the path of the jquery-1.7.min.js.

Narrowing down JavaScript performance issues on a page using a lot of jQuery calls?

My pages seem to be reacting slow.
There is a lot of JavaScript (jQuery) code on the page. How can I narrow it down? What is taking so long?
The YSlow add-on is the best solution to know why your website is slow.
There are many issues which could be the reason for slowness.
Combining many jQuery to one could help you increasing your performance.
Also you can put the script at the bottom of your page and CSS at top.
If you use Firefox, you can install Firebug and use the profiler.
You can read more about it in Understanding Firebug profiler output, and there is a tutorial in Firebug Tutorial – Logging, Profiling and CommandLine (Part I).
If you use Internet Explorer, you can use dynaTrace Ajax edition.
Read more about it in A Step-by-Step Guide to dynaTrace Ajax Edition, available today for public download .
There's also a built-in profiler in Google Chrome that you can play around with.
Both these solutions will help you narrow down what JavaScript function calls are the most costly, and with repeated profilings you will be able to see the effect your changes has.
Using tools like these will not only make you a better programmer (if you take the lessons to heart, and avoid the same mistakes they point out in the future), they will also give you a new appreciation of what happens in your code, since you will get a behind-the-scenes glimpse you haven't seen before ;)
Also, if you don't know YSlow, like Wazzy is talking about - get to know it... maybe your problem isn't even slow JavaScript code :)

Getting very strange javascript error and this page also refuses to work in Internet Explorer 7 or 8

This is the page I'm working on... http://schnell.dreamhosters.com/folio/earthquake.html
Its purpose is explained via the instructions on the left. I'm finding that after doing so many searches and clicking so many of the links in the list on the right that the page freezes up, the Google Map stops working and Firebug tells me of an error in main.js and it goes like this...
b is undefined
Line 49
I really don't know why this decided to happen all of a sudden and the error is so cryptic and muddled amongst Google's code that I don't think I'll be able to figure this one out by myself.
Another problem I'm finding is that the page itself simply refuses to work in IE7 and IE8 (or probably any version of IE for that matter). I am also at a loss as to how to solve this problem because I can't figure out how to use any of IE's debuggers (if they even have one) and seeing how I already tested this and made it work in two browsers (technically three since Safari runs off WebKit just like Chrome), I just don't have the drive or capacity to imagine what could be going wrong.
Any help would be greatly appreciated
Moved from comment to answer.
As scunliffe mentioned, you are trying to do a crossbrowser AJAX without using jsonp. Use either $.ajax() with datatype jsonp or add a &callback=? at the end of the URL in the $.getJSON() call.
IE8 is quite good when it comes to helping out the developer. From memory F12 will open up the developer window where you can inspect the DOM, CSS and debug script.
Your error is cryptic because most javascript comes minified, so variables are all remapped to single letters, etc. See if the script causing the problem has a development (i.e. unminified) version as this will make a lot more sense to step through.
With regards to your specific issue it sounds like a timing issue. While browsers do a decent job of executing script in a consistent way if you follow standards, they do differ in their timings i.e. when things execute. That would explain why b is undefined in some cases and not others.

Categories