We'll spend a significant amount of time using a web browser, and it's important to use a browser with good developer tools, such as Firefox or Chrome. Safari and Internet Explorer have usable developer tools but they are generally not as developer friendly as Firefox or Chrome's developer features.
During the workshop, I'll exclusively use Firefox Developer Edition. It's comparable to Firefox but has a few more features and it even has the word “Developer” in the name.
💻 Any of the following three browsers will work for the workshop:
| Browser | |
|---|---|
 | Firefox Developer Edition |
 | Firefox |
 | Chrome |
Developer Tools
In addition to rendering web pages and storing bookmarks, they also provide a set of developer tools that help in the process of editing and designing webpages and programming in JavaScript.
The shortcut for opening developer tools depends on your browser. Try using the shortcut below to open the browser's dev console on this site.
- Right click: Inspect Element or Inspect
- Firefox:
- Windows/Linux: Ctrl + Shift + I or F12
- Mac: Cmd + Opt + I
- https://developer.mozilla.org/en-US/docs/Tools
- Chrome:
- Windows/Linux: Ctrl + Shift + C
- Mac: Cmd + Opt + C
- https://developers.google.com/web/tools/chrome-devtools/
- Safari:
- Enable: Safari > Preferences > Advanced > Show Develop menu in menu bar
- Right-click + Inspect Element
- https://support.apple.com/guide/safari/use-the-developer-tools-in-the-develop-menu-sfri20948/mac
- RStudio:
- Right-click + Inspect Element
- Firefox: