من زمان زیادی را در DevTools می گذرانم و مطمئن هستم که شما هم این کار را می کنید. گاهی اوقات من حتی بین آنها پرش می کنم، به خصوص زمانی که مشکلات بین مرورگرها را رفع اشکال می کنم. DevTools بسیار شبیه خود مرورگرها است - همه ویژگی‌های DevTools یک مرورگر یکسان نیستند یا در DevTools مرورگر دیگری پشتیبانی نمی‌شوند.
اما تعداد کمی از ویژگی‌های DevTools وجود دارد که قابلیت همکاری دارند، حتی برخی از ویژگی‌های کمتر شناخته شده‌ای که می‌خواهم با شما به اشتراک بگذارم.
برای اختصار، از «Chromium» برای اشاره به همه مرورگرهای مبتنی بر Chromium، مانند Chrome، Edge، و Opera در مقاله استفاده می‌کنم. بسیاری از ابزارهای توسعه‌دهنده موجود در آنها دقیقاً همان ویژگی‌ها و قابلیت‌های یکدیگر را ارائه می‌دهند، بنابراین این تنها مختصر من برای اشاره به همه آنها در یک زمان است.
جستجو گره ها در درخت DOM
گاهی اوقات درخت DOM پر از گره های تو در تو در گره هایی است که در گره های دیگر تودرتو هستند و غیره. این امر یافتن موردی را که به دنبال آن هستید بسیار سخت می کند، اما می توانید به سرعت درخت DOM را با استفاده از آن جستجو کنید. Cmd + F (macOS) یا Ctrl + F (پنجره ها).
علاوه بر این، شما همچنین می توانید با استفاده از یک انتخاب کننده معتبر CSS جستجو کنید .red، یا با استفاده از XPath مانند //div/h1.
در مرورگرهای Chromium، هنگام تایپ کردن، تمرکز به‌طور خودکار به گره‌ای می‌رود که با معیارهای جستجو مطابقت دارد، که اگر با عبارت‌های جستجوی طولانی‌تر یا درخت DOM بزرگ کار می‌کنید، می‌تواند آزاردهنده باشد. خوشبختانه، شما می توانید این رفتار را با سر زدن به غیرفعال کنید تنظیمات (F1) → تنظیمات → جهانی → هنگام تایپ کردن جستجو کنید → از کار انداختن.
پس از اینکه گره را در درخت DOM قرار دادید، می‌توانید با کلیک راست بر روی نود و انتخاب «Scroll into view»، صفحه را اسکرول کنید تا گره را در پنجره نمایش قرار دهید.
دسترسی به گره ها از کنسول
DevTools راه های مختلفی را برای دسترسی مستقیم به یک گره DOM از کنسول ارائه می دهد.
به عنوان مثال ، شما می توانید استفاده کنید $0 برای دسترسی به گره انتخاب شده فعلی در درخت DOM. مرورگرهای Chromium با اجازه دادن به شما برای دسترسی به گره های انتخاب شده به ترتیب زمانی معکوس انتخاب تاریخی با استفاده از $1, $2, $3، و غیره
یکی دیگر از مواردی که مرورگرهای Chromium به شما اجازه انجام آن را می دهند این است که مسیر گره را به عنوان عبارت جاوا اسکریپت کپی کنید. document.querySelector با کلیک راست بر روی گره، و انتخاب نسخه → مسیر JS را کپی کنید، که سپس می تواند برای دسترسی به گره در کنسول استفاده شود.
در اینجا راه دیگری برای دسترسی مستقیم به یک گره DOM از کنسول وجود دارد: به عنوان یک متغیر موقت. این گزینه با کلیک راست بر روی گره و انتخاب یک گزینه در دسترس است. این گزینه در DevTools هر مرورگر به طور متفاوتی برچسب گذاری شده است:
- کروم: کلیک راست کنید → "ذخیره به عنوان متغیر جهانی"
- فایرفاکس: کلیک راست کنید → «استفاده در کنسول»
- سیاحت اکتشافی در افریقا: کلیک راست → "Log Element"
عناصر را با نشان تجسم کنید
DevTools می تواند با نمایش یک نشان در کنار گره به تجسم عناصری که با ویژگی های خاصی مطابقت دارند کمک کند. نشان ها قابل کلیک هستند و مرورگرهای مختلف نشان های مختلفی را ارائه می دهند.
In سیاحت اکتشافی در افریقا، یک دکمه نشان در نوار ابزار پانل عناصر وجود دارد که می توان از آن برای تغییر حالت مشاهده نشان های خاص استفاده کرد. به عنوان مثال، اگر یک گره دارای a display: grid or display: inline-grid اعلان CSS به آن اعمال می شود، a grid نشان در کنار آن نمایش داده می شود. با کلیک بر روی نشان، قسمت های شبکه، اندازه آهنگ، شماره خطوط و موارد دیگر در صفحه برجسته می شود.
نشان هایی که در حال حاضر پشتیبانی می شوند فایرفاکسDevTools در فایرفاکس فهرست شده است اسناد منبع. به عنوان مثال، a scroll نشان یک عنصر قابل پیمایش را نشان می دهد. با کلیک بر روی نشان، عنصری که باعث سرریز شدن با یک علامت می شود، برجسته می شود overflow نشان کنار آن
In کروم در مرورگرها، می توانید روی هر گره کلیک راست کرده و انتخاب کنید «تنظیمات نشان…» برای باز کردن ظرفی که همه نشان های موجود را فهرست می کند. به عنوان مثال، عناصر با scroll-snap-type خواهد داشت scroll-snap نشان کنار آن، که با کلیک کردن، تغییر می کند scroll-snap پوشش روی آن عنصر
گرفتن عکس از صفحه
مدتی است که می‌توانیم از برخی ابزارهای توسعه‌دهنده اسکرین‌شات بگیریم، اما اکنون در همه آنها موجود است و راه‌های جدیدی برای گرفتن عکس‌های تمام صفحه را شامل می‌شود.
فرآیند با کلیک راست بر روی گره DOM که می خواهید ضبط کنید شروع می شود. سپس گزینه ضبط گره را انتخاب کنید، که بسته به ابزارهای توسعه دهنده که استفاده می کنید، برچسب متفاوتی دارد.
همین مراحل را روی آن تکرار کنید html گره برای گرفتن اسکرین شات تمام صفحه. با این حال، وقتی این کار را انجام می‌دهید، شایان ذکر است که سافاری شفافیت رنگ پس‌زمینه عنصر را حفظ می‌کند – Chromium و Firefox آن را به‌عنوان پس‌زمینه سفید ثبت می‌کنند.
یک گزینه دیگر وجود دارد! شما می توانید یک اسکرین شات "پاسخگو" از صفحه بگیرید، که به شما امکان می دهد صفحه را در یک پهنای نمای خاص عکس بگیرید. همانطور که ممکن است انتظار داشته باشید، هر مرورگر راه های مختلفی برای رسیدن به آنجا دارد.
- کروم:
Cmd+Shift+M(macOS) یاCtrl+Shift+M(پنجره ها). یا روی نماد «دستگاه‌ها» در کنار نماد «بازرسی» کلیک کنید. - فایرفاکس: ابزار → ابزار مرورگر → "حالت طراحی پاسخگو"
- سیاحت اکتشافی در افریقا: توسعه → "ورود به حالت طراحی پاسخگو"
نکته کروم: لایه بالایی را بررسی کنید
Chrome به شما امکان می‌دهد عناصر لایه بالایی مانند گفتگو، هشدار یا مدال را تجسم و بررسی کنید. وقتی یک عنصر به #top-layer، یک می شود top-layer نشان کنار آن، که با کلیک کردن، شما را به ظرف لایه بالایی که درست بعد از آن قرار دارد می‌پرد </html> برچسب.
ترتیب عناصر در top-layer ظرف از ترتیب انباشته شدن پیروی می کند، به این معنی که آخرین ظرف در بالا قرار دارد. کلیک کنید بر روی reveal نشان برای بازگشت به گره.
نکته فایرفاکس: به ID بروید
فایرفاکس عنصری را که به ویژگی ID ارجاع می دهد به عنصر هدف خود در همان DOM پیوند می دهد و آن را با یک زیرخط برجسته می کند. استفاده کنید CMD + Click (macOS) یا CTRL + Click (ویندوز) برای پرش به عنصر هدف با شناسه.
پسگفتار
خیلی چیزها، درست است؟ جالب است که برخی از ویژگی های DevTools فوق العاده مفید وجود دارد که در Chromium، Firefox و Safari به طور یکسان پشتیبانی می شوند. آیا ویژگی های کمتر شناخته شده دیگری وجود دارد که توسط هر سه پشتیبانی می شود که دوست دارید؟
چند منبع وجود دارد که من در کنار آن نگه می دارم تا از چیزهای جدید مطلع باشم. فکر کردم آنها را با اینجا به اشتراک بگذارم:
- محتوای مبتنی بر SEO و توزیع روابط عمومی. امروز تقویت شوید.
- پلاتوبلاک چین. Web3 Metaverse Intelligence. دانش تقویت شده دسترسی به اینجا.
- منبع: https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/
