-
JavaScript Console Every browser has different developer tools, some are similar and some quite different but one similarity that all
- 上一篇：ASP.NET技术英文文献和中文翻译
- 下一篇：MVC设计模式和Spring，Struts框架英文文献和中文翻译
browsers have is the JavaScript Console. This is where all errors are logged, but it is often much more powerful than
just an error log. I discuss it from a Google Chrome viewpoint, but most browsers have very similar commands.40839
Access to variables
Often you will want to know a variable’s value so that you can verify it is what you would expect or even just to learn
how the data is structured (especially for objects). To do this, simply type the name of the variable into the JavaScript
console and the value will be output below the name, this works for all types including objects and arrays. There are a
few ways to access the variables via the console:
After the code has r • un – If you are only interested in the final outcome, just do as I explained
above and type the variable name.
• Breakpoint - I will discuss breakpoints in more detail shortly but as with debuggers in many
other languages, you are able to add a breakpoint that allows you to examine the variables at
the point that the code at the breakpoint is executed.
• Debugger Statements - You can manually add breakpoints in your code by writing debugger;
in your code. It is generally easier to use breakpoints, but worth knowing about the debugger
statement.
• Inside the code – You can log to the console from within the code. It is usually easier to use
breakpoints but if you wish to you can log by writing console.log('foo'); within the code.
• As a table – This is currently only available in Google Chrome and Firebug but it is
a very useful way to view arrays as tabular data where each index is a row. By running
console.table(array); from either within the code or within the console (I would
recommend straight from console, during a breakpoint, since it is not compatible with
other browsers).
Prompt
The area that you are able to type into within the console is known as the prompt, since it is used in much the same
way as a shell (command line) prompt is used. This is very useful for accessing the console API, such as console.log
and console.table. But it is also far more powerful, since it can evaluate expressions. These could be as basic as
simple calculation (the answer gets outputted straight away) or something more specific to the page you’re on such
as modifying the DOM. In fact, you can write any JavaScript within the prompt, which makes it an invaluable tool
for debugging since you can for example take a function that is not working as you would expect it to and modify it
without affecting the rest of the script.
Sources
As with the console, most JavaScript debugging tools (within browsers and/or plugins) have a way to view the source
code - which makes sense since you usually need to see the code to understand and debug it – but it is not just read-only.
These tools allow you to manipulate and debug the code line by line. In Google Chrome, it is found under the
‘Sources’ tab, although most of the features are available in most other tools too.
Live editing
Sometimes you want to be able to write a line or code or test out a function, that is what the prompt is for, but
sometimes you want to change the code itself a variety of times and to see how it does affect the rest of the codebase.
Rather than using the prompt or repeatedly saving in your text editor, you can go into the source tab and directly edit
the code. This will run it in a new instance of the JavaScript Virtual Machine so that you can test and debug all you
need to without overwriting the original file (which would then need to be refreshed, and you may lose useful code
et cetera).
Breakpoints