Lesson 4 / الدرس 4

Looking inside a page / النظر داخل الصفحة

Every browser has a set of developer tools built in. They let you see the page as the browser understands it, and change it live — the fastest way to learn, and the fastest way to fix.

في كل متصفح أدوات مطوّرين مدمجة. تتيح لك رؤية الصفحة كما يفهمها المتصفح، وتعديلها مباشرة — وهي أسرع طريقة للتعلّم، وأسرع طريقة للإصلاح.

You have written a file and opened it. When it looks wrong — and it will — you need a way to ask the browser what it actually did with your markup. That is what developer tools are for, and every browser has them already installed. This is the shortest lesson in the course and probably the most useful.

Opening them

Right-click anything on the page → Inspect. The surest way, and it jumps straight to the element you clicked.
F12 on Windows and Linux.
Cmd + Option + I on a Mac.

A panel opens beside or below the page. The tab you want first is Elements (Chrome and Edge) or Inspector (Firefox and Safari). It shows a tree of your page — and it is not your file. It is what the browser built after reading your file, which is the thing that actually matters when the two disagree.

<p>A paragraph
<p>Another one

Run this, then inspect it. You never wrote a single closing tag, yet the tree shows two complete <p> elements — the browser closed them for you. That gap between what you typed and what exists is invisible in your editor and obvious here.

شغّل هذا ثم افحصه. لم تكتب وسم إغلاق واحدًا، ومع ذلك تُظهر الشجرة عنصري <p> كاملين — فقد أغلقهما المتصفح عنك. وهذه الفجوة بين ما كتبته وما هو موجود غير مرئية في محررك، وواضحة تمامًا هنا.

Changing the page without touching your file

Double-click any text in the Elements tree and type over it. Double-click a tag name and change it. The page updates immediately. Nothing you do here is saved — a refresh throws it all away — and that is exactly what makes it useful: you can try five things in a minute without risking the file you spent an hour on.

Two more panels are worth knowing now, even though you will use them properly later. Console reports problems — a file that failed to load shows up here in red and nowhere else. Network lists every file the page asked for and whether it arrived; a missing image is a red 404 line here.

وهناك لوحتان أخريان تستحقان المعرفة الآن، وإن كنت ستستخدمهما جيدًا لاحقًا. لوحة Console تبلّغ عن المشكلات — فالملف الذي فشل تحميله يظهر هنا بالأحمر ولا يظهر في أي مكان آخر. ولوحة Network تسرد كل ملف طلبته الصفحة وهل وصل؛ فالصورة المفقودة سطر أحمر فيه 404 هنا.

Panel	Answers
Elements / Inspector	What did the browser actually build from my markup?
Console	Did anything go wrong?
Network	Did every file I asked for arrive?
Device toolbar	How does this look on a phone?

The four you will use for the rest of this course.

Try it live / جرّب بنفسك

<h1>Inspect me</h1>
<p>Right-click this text and choose Inspect.</p>
<p>Now try leaving a tag unclosed.</p>

Preview / المعاينة

Check yourself / اختبر نفسك

1. You edit some text in the Elements panel and refresh the page. What happens?

2. An image is not appearing. Which panel tells you fastest whether the file arrived?

3. Why can the Elements tree differ from the file you wrote?

Your task / مهمتك

Open the page below in the editor, then open your browser's developer tools on this very page and find this task box in the Elements tree. Then, in the editor, deliberately leave one tag unclosed and run it — and look at what the browser built instead.

افتح الصفحة أدناه في المحرر، ثم افتح أدوات المطوّرين في متصفحك على هذه الصفحة نفسها وابحث عن صندوق المهمة هذا في شجرة Elements. ثم اترك في المحرر وسمًا واحدًا دون إغلاق عن قصد وشغّله — وانظر ماذا بنى المتصفح بدلًا منه.

You opened the developer tools at least once فتحت أدوات المطوّرين مرة واحدة على الأقل
The page has a heading and two paragraphs الصفحة فيها عنوان وفقرتان
One tag is deliberately left unclosed, so you can see what the browser does وسم واحد متروك دون إغلاق عن قصد، لترى ما يفعله المتصفح