To read them in a convenient form, as well as get a lot of useful information about the execution of scripts, browsers have development tools .
For development it is recommended to use Chrome or Firefox.
Other browsers, as a rule, are in the position of “catching up” by the capabilities of the built-in development tools. If the error, for example, is in Internet Explorer, then we are already looking specifically at it, but usually – Chrome / Firefox.
There are a lot of possibilities in the developer’s tools, but at the current stage we’ll just look at how to open them, look at errors in the console and run JavaScript commands.
Google chrome
Open the bug.html page .
There is an error in her javascript code. Of course, it is not visible to the ordinary visitor, you need to open the developer tools.
To do this, use the key F12under Windows, and if you have a Mac, then .Cmd+Opt+J
This will open the developer tools and the Console tab, in which there will be an error.
- When you click on
bug.htmlyou go to the tab with the code to the place of error, there will be a brief description of the error. In this case, the error is caused by a stringlalalathat the interpreter is incomprehensible. - In the same window, you can type commands in JavaScript. For example, type
alert("Hello")– command output message and run it by pressing Enter. We will get to know this and other teams below. - To move the cursor to the next line (if the command consists of several lines) – a combination is used .Shift+Enter
Later in the tutorial, we will take a closer look at debugging in Chrome in the Debugging chapter in the Chrome browser .
Firefox
Firefox uses the Firebug extension for development.
- The first step is to install it.This can be done from https://addons.mozilla.org/firefox/addon/firebug/ . Restart the browser. Firebug will appear in the lower right corner of the window:If the icon is not visible, it is possible that your extensions panel is turned off. Click to display it.Ctrl+\Well, if it is not there, then click F12- this is a hot key to launch Firebug, the extension will appear if installed.
- Further, in order for the console to work, it must be enabled.If the console has already been enabled before, then this step is not needed, but if it is gray, select it in the menu Console and turn it on:
- In order for Firebug to work without glitches, it is advisable to first open Firebug, and only then go to the page.With Firebug open, go to the error page: bughtml .The console will display an error:Click on the line with the error and the browser will show the source code. If necessary, include additional panels.
As in Chrome, you can type and run commands. The area for the commands in the figure is on the right; commands are launched by pressing (for Mac – ).Ctrl+EnterCmd+Enter
You can move it down by clicking on the button (it is not visible in the figure, but it is present in the lower right corner of the development panel).
Internet Explorer
Developer Dashboard is launched by clicking F12.
Open it and go to the page with the error: bug.html . If you have dealt with Chrome / Firefox, then you will be more or less clear further, since IE tools are built later and by analogy with Chrome / Firefox.
Safari
Keyboard shortcuts: , for Mac – instead .Ctrl+Shift+ICtrl+Alt+CCmdCtrl
To access the development functionality through the menu:
- The first thing to do in Safari is to activate the development menu.Open the menu by clicking on the wheel on the right-top and select Settings. Then tab More: Tick Show the “Development” menu in the menu bar. Close the settings.
- Click the wheel and select Show menu bar. Tools will be available in the menu bar that appears, in the item Development.
Conclusion
We sorted out how to open developer tools and look for errors, as well as run simple commands without leaving the browser.
Related Javascript Tutorials
Next we get down to learning javascript.
| Introduction to JavaScript |
| Javascript Reference and Specifications |
| Javascript Code editors |