تا حالا شده دور از سیستم باشید و فقط موبایل شما طبق معمول رفیق و یاور شما باشد اما به شدت نیاز به Devtools مرورگر داشته باشید؟
یک هفته پیش این اتفاق برای من افتاد و بعد از اینکه به سیستم عزیز دوباره دسترسی پیدا کردم بطور کاملا اتفاقی به ابزاری برخوردم که دقیقا چنین نیازی را برطرف می کرد.
نام این ابزار Eruda است و با استفاده از این ابزار به کنسول دسترسی خواهید داشت و به راحتی می توانید خطاهای موجود را بررسی کنید. همچنین امکان بررسی قسمت عناصر و استایل ها و منابع نیز وجود دارد. علاوه بر آن امکان بررسی برخی از مواردی که در تب Network مرورگرها وجود دارد و مواردی دیگر نیز می باشد.
برای مشاهده دموی این ابزار به این آدرس مراجعه کنید. سپس کلید پایین سمت راست صفحه را انتخاب کنید.
نحوه استفاده
اگر می خواهید برای خطایابی سایت خودتان از این ابزار استفاده کنید می توانید این اسکریپت را به پروژه اضافه کنید.
اول فایل را از اینجا دانلود کنید, همچنین اگر با npm آشنا هستید می توانید از طریق npm آن را داشته باشید:
npm install eruda --save
چون فایل حجم زیادی دارد بهتر است زمانی به پروژه اضافه شود که به آخر URL مقدار ?eruda=true را اضافه کنیم. پس کد زیر را به آخر فایل پروژه اضافه کنید:
(function () {
var src = 'node_modules/eruda/dist/eruda.min.js';
if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
})();
آدرس اسکریپت را به مقداری که در پروژه شما صدق می کند تغییر دهید و برای تست کار می توانید در مرورگر بصورت زیر پروژه را باز کنید:
http://example.com/?eruda=true
حال وقتی سایت در مرورگر باز می شود باید دکمه مخصوص به این ابزار در پایین صفحه سمت راست اضافه شده باشد و با انتخاب آن می توانید به این ابزار دسترسی داشته باشید.
بررسی سایت دیگران
برای اینکه از این ابزار برای هر سایتی بتوانید استفاده کنید کافی است زمانی که سایت مورد نظر را باز کردید اسکریپت زیر را در نوار آدرس اجرا کنید:
javascript:(function () { var script = document.createElement('script'); script.src="//liriliri.github.io/eruda/eruda.min.js"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();
تصویر متحرک نحوه استفاده از این روش را نشان می دهد:
عالی