Appendix A. Setting up your environment
Developing without the right tools is like exploring a cave without a flashlight: it will get done, but you’ll be in the dark the whole time. That said, if you already have the tools that are covered in this section, or alternatives you feel comfortable with, skip to the next section.
Far and away, our “best buddy” on this journey will be the Chrome Developer Tools. If you haven’t done so, install the Chrome browser. You can find it at https://www.google.com/chrome/. You can access the Developer Tools from the browser menu at View > Developer > Developer Tools or by right-clicking a page and choosing Inspect as seen in figure A.1.
Figure A.1. The default view of Chrome’s Developer Tools pane shows the HTML markup of a web page, and the CSS styles attached to a selected element.
;%22/%3E%3C/svg%3E)
When you inspect your code, you’ll use the JavaScript console in Developer Tools most frequently. You can switch to it using the Console tab or open it directly from the menu at View > Developer > JavaScript Console.
You can even bring up a console while looking at any other tab in the Developer Tools by pressing the ESC key, as seen in figure A.2. This allows us to do things like look at the HTML while we manipulate it from JavaScript.
;%22/%3E%3C/svg%3E)