DevTools مرورگر چیست؟ آموزش View Source، Inspect و بررسی HTML در موبایل و دسکتاپ

در درس قبل اولین صفحه HTML خود را ساختیم، فایل index.html را در مرورگر باز کردیم و نتیجه کدی را که نوشته بودیم مشاهده کردیم.

اما هنگام طراحی و توسعه صفحات وب فقط مشاهده نتیجه کافی نیست. خیلی وقت‌ها لازم است بدانیم مرورگر دقیقاً چه ساختاری از صفحه ساخته است، یک عنصر چه تگ و Attributeهایی دارد، چرا بخشی از صفحه درست نمایش داده نمی‌شود یا نتیجه یک تغییر کوچک چگونه خواهد بود.

برای انجام این کارها می‌توانیم از DevTools مرورگر یا ابزارهای توسعه‌دهنده مرورگر استفاده کنیم.

در این آموزش با DevTools، ابزار Inspect، پنل Elements، View Source، Console و Device Mode آشنا می‌شویم. همچنین یاد می‌گیریم چگونه سورس یک صفحه را در دسکتاپ و موبایل بررسی کنیم، یک سایت واقعی را روی گوشی Debug کنیم و از امکانات Print و Save Page As مرورگر استفاده کنیم.

DevTools مرورگر چیست؟

DevTools مخفف عبارت Developer Tools است و به مجموعه ابزارهایی گفته می‌شود که مرورگر برای توسعه‌دهندگان وب در اختیار قرار می‌دهد.

با استفاده از DevTools می‌توانیم بخش‌های مختلف یک صفحه وب را بررسی کنیم؛ برای مثال:

ساختار HTML صفحه را مشاهده کنیم.
عناصر صفحه را انتخاب و بررسی کنیم.
Attributeهای عناصر را ببینیم.
HTML و CSS را به‌صورت موقت تغییر دهیم.
خطاهای JavaScript را مشاهده کنیم.
درخواست‌های شبکه را بررسی کنیم.
ظاهر سایت را در اندازه‌های مختلف صفحه آزمایش کنیم.
صفحه را در حالت شبیه‌سازی موبایل مشاهده کنیم.

DevTools امکانات بسیار بیشتری دارد، اما در این درس فقط با بخش‌هایی آشنا می‌شویم که در شروع یادگیری HTML برای ما کاربرد بیشتری دارند.

چگونه DevTools را در Chrome باز کنیم؟

در نسخه دسکتاپ Google Chrome چند روش برای باز کردن DevTools وجود دارد.

روش اول: استفاده از F12

در ویندوز و بسیاری از سیستم‌ها کافی است کلید زیر را فشار دهید:

F12

در بعضی لپ‌تاپ‌ها ممکن است لازم باشد همراه آن کلید Fn را نیز نگه دارید.

روش دوم: میانبر Ctrl + Shift + I

در Windows و Linux می‌توانید از این میانبر استفاده کنید:

Ctrl + Shift + I

در macOS میانبر معمول:

Command + Option + I

است.

روش سوم: از منوی Chrome

در Chrome می‌توانید از منوی سه‌نقطه وارد بخش ابزارهای بیشتر شوید و گزینه Developer Tools را انتخاب کنید.

Inspect چیست و چگونه از آن استفاده کنیم؟

یکی از سریع‌ترین روش‌های بررسی یک عنصر خاص در صفحه استفاده از Inspect است.

روی بخشی از صفحه مانند یک عنوان، تصویر، دکمه یا پاراگراف راست‌کلیک کنید و گزینه:

Inspect

را انتخاب کنید.

DevTools باز می‌شود و مرورگر معمولاً همان عنصر را در پنل Elements انتخاب می‌کند.

این روش بسیار کاربردی است، زیرا لازم نیست خودمان در میان تمام کدهای صفحه به دنبال عنصر مورد نظر بگردیم.

پنل Elements در DevTools چیست؟

یکی از مهم‌ترین قسمت‌های DevTools برای یادگیری HTML پنل Elements است.

در این بخش می‌توانید ساختار فعلی صفحه را به شکل درختی مشاهده کنید.

برای مثال ممکن است ساختاری مشابه این ببینید:

<html>
    <head>
        ...
    </head>

    <body>
        <header>
            ...
        </header>

        <main>
            <h1>آموزش HTML</h1>
            <p>متن مقاله</p>
        </main>
    </body>
</html>

می‌توانید قسمت‌های مختلف این درخت را باز و بسته کنید و رابطه عناصر والد و فرزند را ببینید.

انتخاب یک عنصر با ابزار Inspect

در DevTools ابزاری برای انتخاب مستقیم عناصر صفحه وجود دارد.

در Windows و Linux می‌توانید از میانبر زیر استفاده کنید:

Ctrl + Shift + C

بعد از فعال شدن ابزار انتخاب، نشانگر ماوس را روی قسمت‌های مختلف صفحه حرکت دهید.

مرورگر اطلاعات مربوط به عنصر زیر نشانگر را نمایش می‌دهد.

با کلیک روی عنصر، همان قسمت در پنل Elements انتخاب می‌شود.

مشاهده Attributeهای یک عنصر در Inspect

یکی از کاربردهای بسیار خوب DevTools برای آموزش HTML، مشاهده Attributeهای عناصر واقعی سایت‌ها است.

مثلاً اگر یک لینک را Inspect کنید ممکن است کدی شبیه این مشاهده کنید:

<a
    href="/html-course/"
    class="course-link"
    title="آموزش HTML"
>
    آموزش HTML
</a>

در اینجا می‌توانید مستقیماً مواردی مانند:

href
class
title

را مشاهده کنید.

این روش در درس‌های آینده برای شناخت ساختار HTML صفحات واقعی بسیار مفید خواهد بود.

ویرایش موقت HTML با DevTools

یکی از جذاب‌ترین قابلیت‌های DevTools این است که می‌توانیم HTML صفحه را مستقیماً داخل مرورگر تغییر دهیم و نتیجه را همان لحظه مشاهده کنیم.

مثلاً فرض کنید در صفحه چنین عنصری داریم:

<h1>آموزش HTML</h1>

در پنل Elements روی متن آن دوبار کلیک کنید و آن را به این عبارت تغییر دهید:

آموزش طراحی سایت

تغییر بلافاصله در صفحه دیده می‌شود.

آیا تغییرات Inspect واقعاً سایت را تغییر می‌دهند؟

خیر.

این نکته بسیار مهم است.

تغییراتی که به شکل معمول در پنل Elements انجام می‌دهیم فقط روی نسخه فعلی صفحه داخل مرورگر ما اعمال می‌شوند.

این تغییرات:

فایل اصلی سایت را تغییر نمی‌دهند.
روی سرور ذخیره نمی‌شوند.
برای کاربران دیگر نمایش داده نمی‌شوند.

اگر صفحه را Reload کنید، معمولاً تغییراتی که به این شکل انجام داده‌اید از بین می‌روند و صفحه دوباره براساس اطلاعات اصلی بارگذاری می‌شود.

Inspect برای تمرین HTML چه کاربردی دارد؟

Inspect محیط بسیار خوبی برای آزمایش سریع است.

مثلاً می‌توانید:

متن یک عنوان را تغییر دهید.
یک Attribute را اضافه یا حذف کنید.
نام یک Class را تغییر دهید.
یک عنصر جدید ایجاد کنید.
یک عنصر را موقتاً حذف کنید.

سپس بدون تغییر فایل اصلی نتیجه را مشاهده کنید.

View Source چیست؟

روش دیگری برای مشاهده کد HTML یک صفحه وجود دارد که با نام View Source یا مشاهده سورس صفحه شناخته می‌شود.

در Chrome دسکتاپ می‌توانید روی قسمت خالی صفحه راست‌کلیک کنید و گزینه‌ای مانند:

View page source

را انتخاب کنید.

روش سریع‌تر در Windows و Linux معمولاً:

Ctrl + U

است.

مرورگر صفحه جدیدی باز می‌کند و سورس HTML دریافت‌شده برای صفحه را نمایش می‌دهد.

مشاهده سورس با view-source:

در مرورگرهای مبتنی بر Chromium می‌توان برای صفحات پشتیبانی‌شده از پیشوند زیر نیز استفاده کرد:

view-source:

مثلاً:

view-source:https://example.com

با وارد کردن چنین آدرسی، مرورگر تلاش می‌کند سورس صفحه مورد نظر را نمایش دهد.

تفاوت View Source و Inspect چیست؟

این دو ابزار را نباید با یکدیگر اشتباه بگیریم.

View Source معمولاً سورس اولیه صفحه‌ای را نشان می‌دهد که مرورگر دریافت کرده است.

اما پنل Elements در DevTools ساختار فعلی DOM صفحه را نمایش می‌دهد.

این تفاوت در صفحات ساده ممکن است چندان محسوس نباشد، اما در سایت‌هایی که JavaScript ساختار صفحه را بعد از بارگذاری تغییر می‌دهد، تفاوت می‌تواند زیاد باشد.

برای مثال ممکن است سورس اولیه شامل این ساختار باشد:

<div id="app"></div>

اما JavaScript بعداً چندین عنصر داخل آن ایجاد کند.

آن عناصر جدید ممکن است در پنل Elements دیده شوند، در حالی که در سورس اولیه به همان شکل وجود نداشته‌اند.

Source Code با DOM چه تفاوتی دارد؟

به زبان ساده می‌توانیم فعلاً این‌گونه در نظر بگیریم:

Source Code = کدی که صفحه با آن بارگذاری شده است.

DOM = ساختاری که مرورگر پس از پردازش HTML و تغییرات احتمالی JavaScript در اختیار دارد.

در درس‌های JavaScript با DOM به‌صورت کامل آشنا خواهیم شد.

پنل Sources در DevTools چیست؟

DevTools بخشی با نام Sources نیز دارد.

این بخش با View Source یکسان نیست.

در Sources می‌توان فایل‌ها و منابعی را که صفحه بارگذاری کرده مشاهده کرد؛ از جمله:

فایل‌های JavaScript
فایل‌های CSS
فایل HTML یا اسناد مرتبط
برخی منابع دیگر صفحه

در آینده مخصوصاً هنگام یادگیری JavaScript، پنل Sources اهمیت بیشتری پیدا خواهد کرد.

Console در DevTools چیست؟

یکی دیگر از پنل‌های مهم DevTools بخش Console است.

در Windows و Linux می‌توانید Console را مستقیماً با این میانبر باز کنید:

Ctrl + Shift + J

Console بیشتر هنگام کار با JavaScript استفاده می‌شود، اما از همین ابتدا خوب است بدانیم این بخش کجاست.

در Console ممکن است مواردی مانند این‌ها را مشاهده کنید:

خطاهای JavaScript
هشدارهای مرورگر
پیام‌هایی که برنامه‌نویس با JavaScript ثبت کرده است
برخی خطاهای مربوط به بارگذاری منابع

فعلاً لازم نیست دستورات Console را یاد بگیریم.

آیا DevTools در موبایل وجود دارد؟

مرورگرهای موبایل معمولاً رابط کامل DevTools دسکتاپ را مستقیماً در اختیار کاربر قرار نمی‌دهند.

برای مثال Chrome روی Android پنل کامل DevTools مانند نسخه دسکتاپ را در منوی معمول مرورگر نمایش نمی‌دهد.

اما این به معنی غیرممکن بودن بررسی سایت روی موبایل نیست.

دو روش مهم داریم:

شبیه‌سازی موبایل با DevTools دسکتاپ
Remote Debugging یک گوشی واقعی

شبیه‌سازی موبایل با Device Mode در Chrome

Chrome DevTools قابلیتی به نام Device Mode دارد که با استفاده از آن می‌توانیم اندازه صفحه دستگاه‌های موبایل را شبیه‌سازی کنیم.

ابتدا DevTools را باز کنید.

سپس روی آیکون موبایل و تبلت در نوار بالای DevTools کلیک کنید.

در Windows و Linux معمولاً میانبر زیر نیز قابل استفاده است:

Ctrl + Shift + M

حالا می‌توانید اندازه Viewport را تغییر دهید و صفحه را در عرض‌های مختلف بررسی کنید.

در این حالت می‌توانیم مواردی مانند این‌ها را آزمایش کنیم:

عرض صفحه موبایل
ارتفاع Viewport
حالت Responsive
برخی اندازه‌های از پیش تعریف‌شده دستگاه‌ها
حالت عمودی و افقی

آیا Device Mode دقیقاً مانند گوشی واقعی است؟

خیر.

Device Mode ابزار بسیار خوبی برای تست اولیه Responsive Design است، اما یک گوشی واقعی نیست.

این ابزار محیط موبایل را تا حدی شبیه‌سازی می‌کند، ولی همه تفاوت‌های سخت‌افزاری، سیستم‌عامل، مرورگر واقعی و رفتار دستگاه را نمی‌تواند کاملاً بازسازی کند.

به همین دلیل بعداً بهتر است سایت را روی گوشی واقعی نیز آزمایش کنیم.

Remote Debugging چیست؟

اگر بخواهیم صفحه‌ای را که واقعاً روی گوشی Android در Chrome اجرا شده با DevTools بررسی کنیم، می‌توانیم از Remote Debugging استفاده کنیم.

در این روش سایت روی خود گوشی اجرا می‌شود، اما DevTools روی کامپیوتر باز می‌شود و صفحه گوشی را بررسی می‌کند.

فعال کردن Remote Debugging در Android

مراحل کلی به این صورت است:

Developer Options را در گوشی Android فعال کنید.
گزینه USB Debugging را فعال کنید.
گوشی را با کابل USB به کامپیوتر وصل کنید.
Chrome را روی گوشی باز کنید.
صفحه مورد نظر را روی گوشی باز کنید.
Chrome را روی کامپیوتر اجرا کنید.

سپس در Chrome کامپیوتر این آدرس را وارد کنید:

chrome://inspect/#devices

گزینه مربوط به کشف دستگاه‌های USB باید فعال باشد.

اگر گوشی برای اولین بار متصل شده باشد، ممکن است پیامی برای اجازه USB Debugging روی خود گوشی نمایش داده شود.

بعد از تأیید، تب‌های قابل Debug گوشی می‌توانند در صفحه Inspect کامپیوتر نمایش داده شوند.

با انتخاب Inspect برای تب مورد نظر، DevTools همان صفحه واقعی روی گوشی را باز می‌کند.

Remote Debugging چه مزیتی دارد؟

برخلاف Device Mode، در Remote Debugging صفحه واقعاً روی دستگاه موبایل اجرا می‌شود.

بنابراین می‌توانیم مشکلاتی را بررسی کنیم که شاید در شبیه‌ساز دسکتاپ دیده نشوند.

برای مثال:

مشکلات نمایش در Chrome واقعی Android
رفتار لمسی
برخی تفاوت‌های دستگاه واقعی
خطاهای JavaScript روی گوشی
ساختار DOM صفحه اجراشده روی گوشی

View Source در موبایل چگونه است؟

برخلاف دسکتاپ، در بسیاری از مرورگرهای موبایل گزینه مستقیم View Page Source در منوی معمول وجود ندارد.

در بعضی مرورگرها و نسخه‌ها ممکن است استفاده از آدرس‌هایی با پیشوند:

view-source:

امکان مشاهده سورس را فراهم کند.

برای مثال می‌توان امتحان کرد:

view-source:https://example.com

اما پشتیبانی از این روش در مرورگرها و نسخه‌های موبایل یکسان نیست و نباید آن را یک روش قطعی برای تمام گوشی‌ها در نظر گرفت.

برای بررسی حرفه‌ای HTML یک صفحه روی Android، Remote Debugging با DevTools دسکتاپ روش مطمئن‌تر و کامل‌تری است.

آیا Inspect Element مستقیم روی گوشی داریم؟

Chrome معمولی روی Android رابط کامل Inspect Element مشابه Chrome دسکتاپ را در اختیار کاربر قرار نمی‌دهد.

ممکن است مرورگرهای دیگر، ابزارهای توسعه‌دهنده خاص یا برنامه‌های جانبی امکانات متفاوتی ارائه دهند، اما در این دوره روش استاندارد و حرفه‌ای ما برای Chrome Android همان Remote Debugging خواهد بود.

چگونه یک صفحه وب را Print کنیم؟

مرورگرها می‌توانند یک صفحه وب را برای چاپ آماده کنند.

در Chrome دسکتاپ روی Windows و Linux می‌توانید از میانبر زیر استفاده کنید:

Ctrl + P

در macOS:

Command + P

پنجره Print Preview باز می‌شود.

بسته به سیستم و مرورگر معمولاً می‌توانید تنظیماتی مانند موارد زیر را تغییر دهید:

Printer یا مقصد چاپ
تعداد صفحات
Portrait یا Landscape
اندازه کاغذ
Marginها
Scale
برخی تنظیمات گرافیکی

ذخیره صفحه وب به صورت PDF

از Print Preview معمولاً می‌توانید به جای ارسال صفحه به چاپگر، آن را به صورت PDF نیز ذخیره کنید.

در Chrome گزینه‌ای مانند:

Save as PDF

را به عنوان مقصد انتخاب کنید و سپس فایل را ذخیره کنید.

این روش برای نگهداری یک نسخه قابل مطالعه یا قابل چاپ از صفحه بسیار مناسب است.

Print در Chrome Android

در Chrome Android نیز امکان چاپ وجود دارد.

در نسخه‌های فعلی معمولاً می‌توانید صفحه را باز کنید، از منوی Chrome وارد Share شوید و گزینه Print را انتخاب کنید.

از همان بخش نیز می‌توان در صورت پشتیبانی سیستم، مقصد:

Save as PDF

را انتخاب کرد و نسخه PDF صفحه را روی گوشی ذخیره کرد.

چرا نسخه چاپی ممکن است با صفحه اصلی متفاوت باشد؟

ظاهر صفحه هنگام Print لزوماً دقیقاً مشابه نسخه‌ای که روی نمایشگر می‌بینید نیست.

یک سایت می‌تواند CSS مخصوص چاپ داشته باشد.

برای مثال توسعه‌دهنده می‌تواند هنگام چاپ:

منو را مخفی کند.
تبلیغات را حذف کند.
رنگ‌ها را تغییر دهد.
اندازه متن را تنظیم کند.
چیدمان صفحه را برای کاغذ مناسب‌تر کند.

در دوره CSS با مفهوم Print Styles آشنا خواهیم شد.

Save Page As چیست؟

علاوه بر ذخیره صفحه به صورت PDF، مرورگر دسکتاپ می‌تواند فایل‌های یک صفحه وب را نیز ذخیره کند.

در Chrome دسکتاپ می‌توانید از منوی مرورگر به گزینه:

Save page as

دسترسی پیدا کنید.

در Windows معمولاً میانبر:

Ctrl + S

نیز پنجره ذخیره صفحه را باز می‌کند.

تفاوت Webpage Complete و HTML Only چیست؟

بسته به مرورگر و سیستم‌عامل ممکن است هنگام ذخیره صفحه گزینه‌های مختلفی مشاهده کنید.

دو حالت رایج عبارت‌اند از:

Webpage, HTML Only

در این حالت فایل اصلی HTML ذخیره می‌شود.

اما منابع جانبی صفحه مانند تصاویر، CSS یا JavaScript ممکن است همراه آن ذخیره نشوند.

بنابراین اگر بعداً فایل را به صورت آفلاین باز کنید ممکن است ظاهر یا عملکرد کامل سایت را نداشته باشد.

Webpage, Complete

در این حالت مرورگر تلاش می‌کند علاوه بر HTML، منابع مرتبط با صفحه را نیز ذخیره کند.

معمولاً یک فایل HTML و یک پوشه جانبی شامل برخی منابع صفحه ایجاد می‌شود.

آیا Save Page As یک کپی کامل از سایت می‌سازد؟

خیر.

ذخیره یک صفحه با Save Page As را نباید با دانلود کامل یک وب‌سایت اشتباه بگیریم.

سایت‌های مدرن ممکن است به مواردی مانند این‌ها وابسته باشند:

سرور
پایگاه داده
API
فایل‌های خارجی
JavaScript پویا
احراز هویت کاربر

این بخش‌ها صرفاً با Save Page As به یک سایت مستقل و کامل تبدیل نمی‌شوند.

تفاوت View Source، Save Page و Save as PDF چیست؟

این سه قابلیت اهداف متفاوتی دارند.

ابزار	کاربرد اصلی
View Source	مشاهده سورس HTML اولیه صفحه
Save Page As	ذخیره فایل HTML و در بعضی حالت‌ها منابع صفحه
Save as PDF	ساخت یک نسخه قابل مطالعه و چاپ از ظاهر صفحه

View Source، Elements و Sources را با هم اشتباه نگیریم

در ابتدای کار این سه عبارت ممکن است گیج‌کننده باشند:

View Source

برای مشاهده سورس اولیه HTML صفحه استفاده می‌شود.

Elements

ساختار فعلی DOM صفحه را در DevTools نمایش می‌دهد و امکان بررسی و تغییر موقت عناصر را فراهم می‌کند.

Sources

پنلی در DevTools است که منابع و فایل‌های بارگذاری‌شده صفحه را برای بررسی و Debugging در اختیار توسعه‌دهنده قرار می‌دهد.

چند میانبر مهم DevTools

در Windows و Linux این میانبرها برای شروع بسیار کاربردی هستند:

عمل	میانبر
باز کردن DevTools	`F12` یا `Ctrl + Shift + I`
انتخاب عنصر	`Ctrl + Shift + C`
باز کردن Console	`Ctrl + Shift + J`
Device Mode	`Ctrl + Shift + M`
View Source	`Ctrl + U`
ذخیره صفحه	`Ctrl + S`
چاپ صفحه	`Ctrl + P`

یک تمرین عملی با DevTools انجام دهیم

فایل index.html را که در درس قبل ساخته بودید در Chrome باز کنید.

سپس مراحل زیر را انجام دهید:

روی عنوان صفحه راست‌کلیک کنید.
Inspect را انتخاب کنید.
عنصر h1 را در Elements پیدا کنید.
متن آن را موقتاً تغییر دهید.
یک Attribute مانند title به آن اضافه کنید.
نتیجه را در صفحه مشاهده کنید.
صفحه را Reload کنید.

بعد از Reload بررسی کنید که تغییرات موقت چه شده‌اند.

تمرین View Source

یک وب‌سایت ساده یا فایل HTML تمرینی خودتان را باز کنید.

سپس:

Ctrl + U

را فشار دهید.

سورس صفحه را بررسی کنید و چند تگی را که تاکنون با آنها آشنا شده‌اید پیدا کنید.

سپس همان صفحه را با Inspect بررسی کنید و تفاوت نمایش کد در View Source و Elements را مقایسه کنید.

تمرین Device Mode

DevTools را باز کنید و Device Mode را فعال کنید:

Ctrl + Shift + M

عرض صفحه را تغییر دهید و مشاهده کنید محتوای صفحه در اندازه‌های مختلف چگونه نمایش داده می‌شود.

اگر صفحه هنوز Responsive نباشد مشکلی نیست؛ در دوره CSS یاد می‌گیریم چگونه صفحات را برای موبایل و دسکتاپ بهینه کنیم.

تمرین Save و Print

همان صفحه تمرینی را یک بار با:

Ctrl + S

ذخیره کنید.

سپس با:

Ctrl + P

Print Preview را باز کنید و گزینه Save as PDF را بررسی کنید.

به تفاوت فایل HTML ذخیره‌شده و فایل PDF توجه کنید.

آیا DevTools فقط برای برنامه‌نویسان حرفه‌ای است؟

خیر.

بهتر است از همان ابتدای یادگیری طراحی وب با DevTools آشنا شوید.

این ابزار در طول مسیر آموزش HTML، CSS و JavaScript دائماً همراه ما خواهد بود.

هرچه زودتر استفاده از Inspect و Elements برای شما عادی شود، پیدا کردن خطاها و درک ساختار صفحات وب نیز ساده‌تر خواهد شد.

در این درس چه چیزهایی یاد گرفتیم؟

در این آموزش با DevTools مرورگر و چند ابزار مهم برای بررسی صفحات وب آشنا شدیم و یاد گرفتیم:

DevTools چیست.
چگونه DevTools را در دسکتاپ باز کنیم.
Inspect چه کاربردی دارد.
پنل Elements چیست.
چگونه HTML را به‌صورت موقت تغییر دهیم.
چرا تغییرات Inspect دائمی نیستند.
View Source چیست.
چگونه از view-source: استفاده کنیم.
View Source با Elements چه تفاوتی دارد.
DOM با سورس اولیه صفحه چه تفاوتی دارد.
Console چیست.
Device Mode چگونه صفحه موبایل را شبیه‌سازی می‌کند.
چرا شبیه‌سازی موبایل جای تست روی گوشی واقعی را نمی‌گیرد.
Remote Debugging در Android چگونه انجام می‌شود.
مشاهده سورس در موبایل چه محدودیت‌هایی دارد.
چگونه یک صفحه را Print کنیم.
چگونه صفحه را به صورت PDF ذخیره کنیم.
Save Page As چه کاربردی دارد.
HTML Only با Webpage Complete چه تفاوتی دارد.

جمع‌بندی

DevTools مرورگر یکی از مهم‌ترین ابزارهای یک توسعه‌دهنده وب است. با استفاده از آن می‌توانیم ساختار HTML صفحه را بررسی کنیم، عناصر را انتخاب کنیم، تغییرات موقت انجام دهیم و رفتار صفحه را بهتر درک کنیم.

همچنین یاد گرفتیم که View Source و Elements یک چیز نیستند؛ View Source سورس اولیه صفحه را نشان می‌دهد، در حالی که Elements ساختار فعلی DOM را نمایش می‌دهد.

برای تست اولیه موبایل می‌توانیم از Device Mode استفاده کنیم، اما برای بررسی دقیق یک صفحه روی Chrome واقعی Android، Remote Debugging ابزار مناسب‌تری است.

از این درس به بعد هنگام یادگیری HTML مرتب از DevTools استفاده خواهیم کرد تا فقط کدها را حفظ نکنیم، بلکه بتوانیم ساختار واقعی صفحات وب را نیز بررسی و تحلیل کنیم.

در درس بعدی وارد ساختار داخلی فایل HTML می‌شویم و با ساختار اصلی سند HTML، DOCTYPE و عناصر html، head و body آشنا خواهیم شد.

درس قبلی: شروع کار با HTML؛ ابزارهای لازم و ساخت اولین صفحه وب

درس بعدی: ساختار اصلی سند HTML؛ آشنایی با DOCTYPE، html، head و body

درباره نویسنده

حبیب قنبری

نویسنده و مدرس در ویترین؛ علاقه‌مند به انتقال تجربه‌های کاربردی و قابل اجرا.

مشاهده همه نوشته‌ها

DevTools مرورگر چیست؟

چگونه DevTools را در Chrome باز کنیم؟

روش اول: استفاده از F12

روش دوم: میانبر Ctrl + Shift + I

روش سوم: از منوی Chrome

Inspect چیست و چگونه از آن استفاده کنیم؟

پنل Elements در DevTools چیست؟

انتخاب یک عنصر با ابزار Inspect

مشاهده Attributeهای یک عنصر در Inspect

ویرایش موقت HTML با DevTools

آیا تغییرات Inspect واقعاً سایت را تغییر می‌دهند؟

Inspect برای تمرین HTML چه کاربردی دارد؟

View Source چیست؟

مشاهده سورس با view-source:

تفاوت View Source و Inspect چیست؟

Source Code با DOM چه تفاوتی دارد؟

پنل Sources در DevTools چیست؟

Console در DevTools چیست؟

آیا DevTools در موبایل وجود دارد؟

شبیه‌سازی موبایل با Device Mode در Chrome

آیا Device Mode دقیقاً مانند گوشی واقعی است؟

Remote Debugging چیست؟

فعال کردن Remote Debugging در Android

Remote Debugging چه مزیتی دارد؟

View Source در موبایل چگونه است؟

آیا Inspect Element مستقیم روی گوشی داریم؟

چگونه یک صفحه وب را Print کنیم؟

ذخیره صفحه وب به صورت PDF

Print در Chrome Android

چرا نسخه چاپی ممکن است با صفحه اصلی متفاوت باشد؟

Save Page As چیست؟

تفاوت Webpage Complete و HTML Only چیست؟

Webpage, HTML Only

Webpage, Complete

آیا Save Page As یک کپی کامل از سایت می‌سازد؟

تفاوت View Source، Save Page و Save as PDF چیست؟

View Source، Elements و Sources را با هم اشتباه نگیریم

View Source

Elements

Sources

چند میانبر مهم DevTools

یک تمرین عملی با DevTools انجام دهیم

تمرین View Source

تمرین Device Mode

تمرین Save و Print

آیا DevTools فقط برای برنامه‌نویسان حرفه‌ای است؟

در این درس چه چیزهایی یاد گرفتیم؟

جمع‌بندی

حبیب قنبری

از آموزش تا اجرای حرفه‌ای، کنار شما هستیم.

دیدگاهتان را بنویسید لغو پاسخ