Develop Reference

Debugging and checking what variables are equal to in production

So I've been coding for a while now in school, and I'm having my first introduction into a real working code base at my new job. When it comes to debugging, like if I want to find out what a certain variable is equal to, I'll often just console.log() things out and hope that something useful comes out of it.
It seems really inefficient considering how many moving parts there are in the code. Most of the time, it works eventually, but it feels so barbaric just editing the code over and over and looking at the browser's console until something useful comes out, and it feels like there has to be a better way to debug in a production environment. I am specifically using Ember.JS, but this question would apply to any framework like React or Angular or Node.

There are many tools out there to debug JS, the most "basic" being the debugger in your browser. Some tools go further also, for example VSCode has a slew of extensions that open and control the browsers debugger.
Chrome: https://developers.google.com/web/tools/chrome-devtools/javascript/
Firefox: https://developer.mozilla.org/en-US/docs/Tools/Debugger
Edge: https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide/debugger
Safari also has one in the develop menu but there is no site describing it in detail - it is located in the sources pane

If you use VS Code, you can run Node apps in debug mode then select Node.js.

How/Tools to Diagnose if the html, javascript or CSS is causing your page to not render?

I am a new web developer and I was wondering if there is any hints as to whether your webpage is not being rendered properly due to issues related to JavaScript, HTML or CSS. And what tools to possibly use.

Firebug is a great plugin for Firefox that you cannot live without. It will help you troubleshoot those layout issues.

Tools such as BrowserCam or Adobe's Browser Lab can be invaluable for cross browser testing, some cost may apply.
Also it's reasonable for a developer to have a copy of each major browser installed for your own testing, to certainly cover the majority of web users.

A good starting point might be to use W3C Markup & CSS Validation Service which is is a validator by the World Wide Web Consortium (W3C) that allows Internet users to check HTML documents for conformance to HTML or XHTML standards
W3C Wikipedia
The W3C Markup Validation Service
The W3C CSS validation Service
To troubleshoot javascript here is a thread that suggests some useful tools for IE and firefox Javascript troubleshooting tools

A lot of people use firebug. It'll show you javascript errors and let you look inside page's html and styles.
But generally, I'm not sure what "issues related to JavaScript, HTML or CSS" means. Browser has very few ways to know that page renders not as you expect it to (javascript errors being one of them).

I'm a fan of both the aforementioned firebug and web developer plugins in Firefox. The dev tools in Chrome are great as well.
In the end, much of it is experience from seeing and fixing the errors yourself, and that just comes with time.

Is there a tool can search a page and all linked css and js files for a string?

In my quest for knowledge I sometimes find myself scouring the source of a page only to find that the javascript method im looking for isnt on the page directly. That said I think it must be on one of the linked javascript pages. However I dont really want to have to look through each individual file to find the line. Is there a tool that can do this for me?
Preferably in firefox as an add-on I was thinking...
Cheers,
Pete

Have you checked out Firebug?

yes.. Firebug in Firefox | IE developer toolbar for IE | Developer toolbar for Firefox are great tools for indepth check of JS/CSS/HTML

We ran into a similar challenge while developing/editing our WordPress sites (i.e. not being able to search all CSS/PHP/JS files at once). As a solve, we built a plugin to allow us to do just that. If this question is related to a WordPress site, the plugin might help - rather than searching in Firebug and then having to jump back onto WordPress, you can search all and edit directly in WordPress. Plugin is called WP Backend File Search.

Best ways to develop painlessly in Javascript on a local machine

I'm pretty new to workign with Javascript.
In most languages you can run the code quickly locally on your machine. From what I've seen, in JS you generally only use it via the browser, and so I've been uploading my code an viewing its effects in the browser. This has proven very tiresome. Also, if I mak one error, it seems like my JS/JQuery will just do NOTHING, instead of giving me a useful error, message, which is making it painfully slow to code in.
IS there some way to run JS locally to see that it is working as I go? And then only upload it to the web when I'm mostly done? What ways are there for me to do this? What ways aer there for me to unit test the Javascript locally? Say I have some JAML that should render as <p>HI</p>, how do I run this locally in a unit test?
Thanks for the help,
Alex
EDIT:
Thanks for all the great suggestions. I'll have to take a bit of time and go through them to see which ones best help me in my situation.

Since you're using jQuery, I assume that you actually want to manipulate the various elements on your page. So depending on your specific development enviroment, uploading it each time is probably the way to go anyway. If you can set up a dev enviroment on your local machine (not always possible) then go with that.
As an actual answer to your question, I suggest using Chrome's developer tools, it doesn't just have the console, but an element inspector, and a resource tracker (resource tracker is invaluable when working with JSON and AJAX, since invalid json will fail silently)
As far as I know, the firebug plugin for firefox (dont use it myself) has a similar feature set, so if you're more comfortable with that go with it.
Just remember, as a developer, your development (and debuggin) enviroment is just as important as the code that you are writing.
EDIT: Noticed that you mentioned unit testing. There are several unit testing frameworks out there for JS including one that integrates with firebug called FireUnit. Do a quick google search to find more if you want.

You don't need to upload the JS file to a server to test it. Just write an html and declare the js binding
<script
src="js/yourJSFile.js"
type="text/javascript"></script>
Edit the JS file in your favorite editor and then refresh the page to test it.
For unit testing the best option is Selenium. It allows you to record an interaction with the browser and then play it back.

You can use Firebug with Firefox to debug JS, and Google Chrome has a debugger built-in (use the Tools -> Developer Tools menu).

You can run Javascript from the local file on your machine in your browser, so you can skip the uploading step.
Also, I'd recommend using Firefox/Firebug combo for developing Javascript as it will be very handy, especially for the part you mentioned about not seeing what's going wrong with your code.

Even if you upload your javascript it gets downloaded back to you as soon as you visit the webpage that invoques it. Its run client side always. So stick to local and use firebug as the others have said. Google`s developer tool is quite nice too.

In the browser if you open the developer tools, follow the following steps:
1) Navigate to sources
2) Under sources, click snippet and open run.js
3) You can use run.js to write as much code as you want and run it locally only to see if your code is working or not (it will give you output on the console)
4) Also you can get used to some keyboard shortcuts to make it faster for you.
5) For small javascript codes, you can navigate to console and run your code there

If you want to do unit testing with Javascript there are extension of Firebug that can help you with that. I haven't try any of them, so I can't really tell you which one are worth considering, but you can easily find them if you search for the keyword "Firebug unit testing" on Google.
What seems to be comming on top is FireUnit. You can find some information about how it works here.

Consider Spider Monkey, which is a javascript engine separate from a browser. If what you are developing does not involve rendering to a webpage or can be separated from the rendering code (good practice!), then this could be useful.

I prefer Chrome to Firefox and I just found Web Server for Chrome.
It's just a Google App that quickly sets up a web server for you and will be set up anywhere you are logged into Chrome. It only allows file access to your current devices, or if you specify, other devices only on the current LAN.
You just point it to the directory with your index.html file and type http://127.0.0.1:8887 in your browser.

Additionally to the answers given you can use Jasmine for automated testing.
A tutorial that seems to help get started with automated testing on Jasmine is provided by Evan Hahn.
I used it and for me it works like a charm. Especially if test driven development is what you are going for!

What coding conventions that help jQuery and Firebug work together?

I'm fairly new to both tools and need to go hardcore with both as I manage, monitor, and tweak a new site's design process. What sort of strategies should I ask be implemented that sets a good solid foundation for debugging, testing, and logging?
[to the degree that back-end stuff can play a role - it's .net mvc
thx

I would use Firebug to see how things are working with a few Firebug Add-ons.
I would use YSlow to check that you aren't downloading too much and it will make suggestions if you aren't minifying and gzipping your javascript.
I would also use FireQuery as that highlights jQuery very nicely in Firebug. I use it quite a lot these days to see what it should be firing.
Firebug doesn't rewrite XHRequests anymore but there is a bug in the latest Firefox/Firebug where if can block long running XHR calls. Details here

First off make sure you've read Firebug's docs. Some of the commands work cross-brower with other tools as well.
A simple search query will show you all available extensions for Firebug. As some people mentioned - some of them are really helpful.
Also it's important not to limit yourself to just a single tool since you will most likely be developing for multiple browsers. So make sure you take a look at webkits developer tools (Safari, Chrome) as well. Here's a good article which sums up the most popular development/debug tools.
You might want to research how jQuery/jQuery plugins are structured/organized so you have general idea how to organise your own JavaScript/jQuery code. It all depends how JavaScript heavy is your application. If jQuery just provides some visual enhancements and few Ajaxified pages here and there, don't bother. From other hand if it's very JavaScript heavy (as in a lot more site logic on client-side then on backend) I would suggest Prototype over jQuery, but it's just my opinion.
You could consider using automatic tools to build your JavaScript if you have a lot of code.
For example:
Sprockets
Juicer
On production server you want to end up with as few JavaScript files as possible and make sure to compress em.
If you're interested in more links to articles/tools for javascript heavy applications, drop a comment. I'm just trying to stay on topic at the moment.

I would just give a small warning using FireBug's network monitor and AJAX together. When enabled, it rewrites some HTTP headers and breaks stuff badly (well it used too, not sure anymore).
So if anything goes ape. Check that network monitoring is disabled.

I will also add for tools FireCookie, as it goes very well with $.cookie.
When I am debugging jQuery code I am using the NET panel a lot in Firebug for all ajax requests. Very helpful to see what are you sending and what are you receiving.
Also I use a lot the comand line, to test snippets of code.
You cannot do without the console. It will be very helpful. Example:
$.get( 'url.php', {},
function(data){
$.each(data, function(x){
console.log( x ); // will log each x object to see what it contains
});
}, 'json'
);

I also suggest you install FireUnit addon. It helps you work with QUnit unit tests. Of course that is if you are planning to write unit tests but in most cases that's the very good idea.

As much as you might love Firebug, Safari's developer tools are also quite powerful, and worth checking out. It's all I use when I dev.
Worth mentioning that Safari's javascript engine is still faster than FFX's, while Chrome reigns supreme. They're playing catch-up though, so this really isn't worth caring about.