Title: Inspirational (P)articles: Use the DOM Inspector

Author: Martin Moene

Date: 03 September 2015 07:24:06 +01:00 or Thu, 03 September 2015 07:24:06 +01:00

Summary: Silas S. Brown shares a tip for debugging web pages.

Body: 

This may seem obvious to some, but not every developer knows about it so it might be worth a mention. A while ago I was trying to help a Web designer who was struggling with a complex layout problem, and I complained that her laptop’s touchpad was difficult to use. She went off to get a real mouse, but as she walked in with the mouse I said, “Got it: it’s a spurious right-margin on line 66 of main.css”. But how did you...?

All of the major graphical browsers have some variation on the DOM (Document Object Model) inspector, usually accessed from the context menu (the right-click menu in the page). These allow you to inspect the document, not just by looking at the source code of the HTML, CSS and Javascript files, nor even a pretty-printed, formatted version of these: the usefulness of that is limited by the fact that modern websites can be changed on-the-fly by scripts, so the static source code before the scripts run might be a far cry from what actually ends up on the screen. Rather, the DOM inspector lets you inspect the current state of the document, after scripts have run (or while they are still running), and often helps to locate which stylesheet rules are doing what, and so on. In short, if you’re doing anything that involves a complex Web front-end then you might want to be aware of this facility.

Notes: 

More fields may be available via dynamicdata ..