“The heading looks wrong” is a perfectly reasonable way to report a website problem. But what if you could also show which font is appearing, where the spacing changes or when the layout starts to break?
Your desktop browser includes tools that can help you gather those clues. You do not need to become a developer to use a few of them—and you do not need to install another WordPress plugin.
What is Inspect Element?
Inspect Element opens a browser’s developer tools, often called DevTools, at the part of the page you selected. It lets you examine the structure and styling behind what you see.
Two terms are useful to know: HTML gives the page its structure, such as headings, paragraphs and links. CSS controls its appearance, including colours, spacing and font sizes.
Inspect can help you understand those details. It does not give you access to a website’s private server files or WordPress administration area.
Start by looking, not changing
For a first attempt, use an ordinary public page on your own website. Save any unfinished work elsewhere before reloading a page, and avoid practising on a checkout or account-management screen.
The examples below use desktop Chrome or Microsoft Edge. Other browsers have similar tools, although their labels and layouts differ.
Right-click a heading or paragraph and choose Inspect. A panel opens beside or below the page, with the selected element highlighted. The amount of information may look intimidating, but you only need a small part of it to begin.
Find out which font size is being used
Suppose one paragraph looks noticeably smaller than the others:
- Right-click that paragraph and choose Inspect.
- In the Elements panel, find the Computed tab. It may sit beside Styles.
- Filter for font-size and note the displayed value.
- Inspect a normal-looking paragraph and compare the same value.
Different values give your designer a useful lead. Matching values do not rule out a problem: font family, weight and line spacing can also change how large text appears.
Microsoft’s CSS inspection reference explains how the Styles and Computed panels show the rules affecting an element.
Understand what a temporary edit means
Developers can change text or CSS in the Elements panel to preview an idea. In ordinary use, those edits affect the page in that browser tab; they do not publish changes to your website. Reloading normally removes them.
Advanced features can preserve local changes, so that rule should not be stretched to every DevTools feature. For this beginner exercise, leave overrides and file connections alone.
A permanent correction belongs in the appropriate website setting, content editor or code, followed by testing. A successful preview is a clue about the fix, not the finished repair.
Check where a layout becomes cramped
The phone-and-tablet icon in DevTools opens a device toolbar that lets you preview narrower screen widths.
Choose a responsive view and gradually reduce the width. Watch for headings cut off at the edge, overlapping buttons, images wider than the page or a menu that becomes difficult to use. Note the width where the problem appears and take a screenshot.
This preview is useful, but it does not reproduce every detail of a real phone. Google describes device mode as an approximation; finish important checks on actual phones and tablets, including their browsers and touch controls. See Chrome’s device-mode guidance.
Know the limits of the tool
DevTools also includes network, performance and accessibility features. A developer can use them to investigate missing files, slow requests and information exposed to assistive technology.
An error message alone does not identify the cause of a broken page, and a clean automated report does not establish that a website is accessible. Keyboard operation, understandable labels, reading order and real user experience still need attention. Google’s accessibility reference explains how browser tools contribute to that work.
Keep your investigation safe
You do not need to paste commands into the Console for any of the checks in this article. Unlike a temporary style preview, JavaScript run there can act within the page and may affect your account or send information elsewhere.
Do not paste unfamiliar code into the Console or bypass a warning because a message promises a quick fix. Google explains this scam in its guide to self-XSS attacks.
Before sharing screenshots, hide personal information. Network logs can contain sensitive details too; do not post them publicly or send an unreviewed export just because someone requests it.
Turn your findings into a useful support request
A clear report often saves more time than trying to diagnose everything yourself. Include:
- The page address and the part that looks wrong.
- Your browser and device.
- What you expected and what actually happened.
- The steps that make the issue appear.
- A screenshot with private information removed.
- Any useful comparison, such as a different font size or the width where the layout breaks.
For example: “On the About page in Edge on my laptop, the second paragraph is smaller than the first. Computed shows 14px for that paragraph and 18px for the first. I have attached a screenshot.”
You have now given someone a specific problem they can investigate. If you would like help finding the cause and making a lasting correction, contact Econoweb Designs.
