DES 0327, Interactive Design I: Basic web design debugging tools

Описание: Learn more about some essential tools used in web design: private browsing and developer tools.

The description provides for video chapters and notes/corrections. A look-through is advised.

Made for DES 0327, Interactive Design I: a class at San Francisco State University, School of Design.



Introduction: 00:00
1.0.0: Private Windows: 00:18
1.1.0: How to open private windows: 01:18

2.0.0: Developer tools: 02:30
2.1.0: How to open devtools: 03:04
2.2.0: Common devtool features: 03:42
2.2.1: Docking and options: 04:58
2.2.2: Inspect Element: 05:43
2.2.3: Rules panel: 07:12
2.2.4: Layout panel: 08:44
2.2.5: Computed panel: 10:10
2.2.6: Changes panel: 10:57

Conclusion: 11:31



Notes:
Re. User Agent: The definition of a User Agent provided in the video is close, but not quite up to par. It'd be more correct to replace mentions of the "User Agent" in this video with the more precise term "User Agent stylesheet," as the video refers to the default CSS styling that your browser (a sort of User Agent) provides to build up from. We won't be getting that much into this in Interactive DES I, if at all, so this isn't too big of an issue. But if you choose to learn more about Responsive Design either academically or professionally, you'll need to double check your definitions.

In the meantime though, here are a few webpages of interest if you're interested in learning more:
https://aiad.com.au/in-web-development-wha...
https://developer.mozilla.org/en-US/docs/W...
https://developer.mozilla.org/en-US/docs/W...


Re. Safari tools: Regrettably I don't have a Mac on hand to record footage of opening private windows or developer tools on Safari. Using these features in Safari is a bit different compared to Chrome or Firefox. Fortunately, Apple has a few user guide articles and pages towards these ends:

https://support.apple.com/guide/safari/bro...
https://support.apple.com/guide/safari/use...
https://developer.apple.com/safari/tools/



Looking to get ahead? Try looking into and experimenting with these advanced features on your own:
• Most browser devtools feature a Responsive Design Mode. This often lets you simulate conditions like specific dimensions, internet connections, and touch controls.
• Most browser devtools also feature a console, both for the page itself and for your whole browser. This would have more relevance if you choose to implement JavaScript or more programming code.