Browser Review
As discussed during Setup, browsers are built on different engines. Most things will similarly across all browsers, but you may occasionally encounter situations where an element or style renders differently, or a feature want to use has not yet been implemented.
The content covered in this class has been selected to ensure support across all modern browsers. However, unexpected quirks or surprises may still arise. If you're troubleshooting a problem in Chrome and can't find the cause in your code, try opening your project in Firefox (or vice versa). You may find that it works as expected in a different browser, which will help you focus on addressing specific cross-browser compatibility issues.
Developer Tools
All modern browsers have built-in Developer Tools to assist with development. While many features of Developer Tools will not be covered this semester, it is essential to be familiar with the following concepts:
- Finding the Developer Tools.
- Viewing and editing the HTML content of an open page.
- Viewing and editing the CSS of an open page.
- Opening a page in Device Mode or Responsive Design Mode, which allows you to test your site at different screen sizes and orientations.
The links below cover these topics for Chrome and Firefox. If you are using a different Chromium-based browser, such as Edge or Brave, the Chrome documentation should be similar enough to get you started, but you may want to look for specific documentation for those browsers as well.
Chrome:
- Open Chrome DevTools
- View and Change the DOM (HTML)
- View and Change CSS
- Simulate Mobile Devices with Device Mode (Responsive Design Mode)
Firefox: