From the course: Learning Chrome Web Developer Tools

Setting up your environment - Chrome Tutorial

From the course: Learning Chrome Web Developer Tools

Start my 1-month free trial Buy for my team

Setting up your environment

“

- [Instructor] To complete the videos in this course, you need two applications. Google Chrome web browser, and a code editor. In addition, installing an HTTP server on your computer is optional, but really helpful for this course. Google Chrome is the most widely used web browser today, and it has extensive and powerful developer tools built in. Other browsers have developer tools as well, but Chrome has been at the lead in building out new tools to tackle the needs of web developers as the web grows and changes. A number of great code editors are available, both free and paid apps. Any editor that lets you edit and save plain text is fine for this course. So if you have a code editor you like, such as Sublime Text or Atom, it's fine to use that. I use Visual Studio Code in these videos, which is a version of Microsoft's Visual Studio created specifically for web development. Visual Studio Code is free and has Windows, Mac, and Linux releases. The code is available on GitHub, and users can submit issues there as well. One thing I like to do to customize the way my editor behaves is to turn on word wrap. To do that, I'm going to click View, and then find Toggle Word Wrap. This ensures that long lines of code don't run off the screen. I've also customized my editor with a few extensions that are particularly useful for this course. Bracket Pair Colorizer 2 by CoenraadS color codes each nested pair of parentheses, brackets, and braces to make nesting levels easier to distinguish. Note that this is a new, improved version of a previous extension called simply Bracket Pair Colorizer, so be sure to grab version two for the most up to date code. Indenticator by SirTori highlights your current level of indent, which is also helpful in identifying your location in nested code. Finally, Live Server by Ritwick Dey is an HTTP server you can launch with a single click that automatically opens the current document in your default browser. Even when you're examining local code in browser developer tools, it's best to open those using HTTP rather than directly from the local file system. As a web developer, an HTTP server is a tool that you'll need to have access to, so if you don't already have one installed at this point, use this course as your excuse to install it. Live Server is really easy to install and use. Live Server is specifically for Visual Studio Code. If you're using the Sublime text editor, check out the Live Reload extension. If you're an Atom user instead, try using BrowserPlus. If you want to learn more about anything I use or talk about in this course as I go along, I encourage you to explore here in our library for a deeper dive on that topic. Now let's get started.

Contents