Browser Developer Tools
Last updated
Last updated
For this guide, Mozilla Firefox will be our browser of choice because of its powerful, wide-ranging and easy-to-use developer tools. Feel free to use any browser of your choice, keeping in mind that not all features may be available in the same form as with Firefox.
When first learning JavaScript, it is customary to open a blank page on your browser to give your Browser Console a clean slate. To do so, open a new tab in your browser and type the following:
and press enter. You should see a completely blank white (or black, based on your settings) page.
To open up the Browser Developer Tools, navigate to a blank page and just use the keyboard shortcut f12 or fn + f12 (based on your keybinds). This should open up the Dev Tools window, which is resizable and can be placed on any side of the screen you want (except the top).
You'll see a few tabs at the top of the window labelled with names like Inspector, Console and Style Editor (depending on the browser). Navigate to the Console tab by clicking on it. You should see a, well, console with your typing cursor targetted on the first line. This is where you will write all your JavaScript code for the first part of this guide.
Next you'll get started with using the console to execute some JavaScript code.
