When it’s in this state you can click and hold the mouse button then drag up and down to adjust the split between the web page and the panel. If you move your mouse to the top of the developer tools panel you should find that the cursor changes to a double-headed arrow. The other entries in the top section of the Web Developer menu are just shortcuts to open the panel with a particular tab already selected. The Toggle Tools menu entry opens the panel in the same state that it was in when you last closed it.
The tabs contains different tools, each focusing on a slightly different aspect of web development. In this tutorial we’ll work with the tools docked to the bottom of the window, so your browser should look something like this:Īs you can see there are several tabs along the top edge of the developer tools panel.
You can switch between all three options using the buttons at the top right of the panel. Select this menu entry and the developer tools panel will open - usually at the bottom of the browser window, but it could be at the side, or even in a separate window. The most useful are those in the top section of the menu, but the only one you really need to use is the first, Toggle Tools. Clicking this will open the submenu that holds a list of all the developer tools. Towards the bottom of the menu you should see an entry labelled Web Developer. Open the main Firefox menu using the button at the top right of the window. Let’s start with the most obvious and discoverable: via the menu. There are several ways to access the developer tools and which you use is largely down to personal preference. If you’d rather open the link in a new tab, that will work equally well. You don’t have to open a page in a new window to use the developer tools, but it will make it easier when switching back and forth to this tutorial.
If you’re using another browser, copy the link address below and paste it into the address bar of your Firefox window. If you’re reading this in Firefox, right-click on the link below, and select Open Link in New Window from the context menu. You can use the developer tools to inspect any web page, but for now let’s take a look at the main page of Canonical’s tutorials site. But if you’re using a different browser you should start Firefox now. If you’re already using Firefox to read this tutorial, that’s great. That’s one of the things that makes web development so compelling - you’ve already got everything you need to get started!įor this tutorial you need to be running Firefox - although the skills you’ll learn are applicable to other browsers, too. There’s nothing you need to add, no extensions to download, no hidden preferences to change. Opening the developer toolsĮvery copy of Firefox has a suite of developer tools built right into the browser (as do Chrome, Safari, Edge and most other modern browsers). Whichever approach you prefer, there are links on the last page that will help you take your web developer skills to the next level. There’s a getting started guide on Mozilla’s web developer site, but if you’re the sort of person that would rather just jump right in and get going you should still be able to complete this tutorial even without that background knowledge. The Firefox web browser (installed by default in Ubuntu desktop systems)Īlthough you don’t need any experience in web development to follow this tutorial, a little knowledge of how a web page is written might make some things a little more understandable.A computer running Ubuntu 16.04 or above.