ترفند های گوگل devtools

ترفندهایی برای کار با قسمت Sources در کروم

در مطالب قبل در مورد کانال های مختلف کروم و همینطور تعدادی از ویژگی های جدید آن برای طراحان وب بحث کردیم. در این مطلب چند ترفند را برای استفاده بهتر از قسمت منبع بیان می کنیم.

قبل از هرچیزی چند کلید میانبر پرکاربرد باهم یاد بگیریم:

  • Ctrl + Shift + I (mac: Cmd + Alt + I): باز کردن Devtools
  • Ctrl + [ و Ctrl + ]: برای حرکت کردن بین تب های مختلف Devtools
  • Ctrl + Shift + D: مکان نمایش Devtools را بین دو وضعیت اخیر تنظیم شده تعویض می کند.

باز کردن سریع قسمت Sources

زمانی که در قست نمایش DOM هستیم می توانیم با راست کلیک بر روی لینک های مربوط به اسکریپت و استایل و انتخاب گزینه Open به فایل مربوطه دسترسی داشته باشیم.

 
باز کردن فایل در قسمت منبع در chrome devtools
 

 

انتخاب ستونی خطوط و ویرایش مقادیر

می توانیم در قسمت Sources با نگه داشتن کلید Alt و کشیدن نشانه گر, خطوط را به صورت ستونی انتخاب و سپس آنها را ویرایش کنیم.

همچنین می توانیم با نگه داشتن کلید Alt و با استفاده از کلیدهای جهت پایین و بالا مقادیر را کم و یا زیاد کنیم.

 

انتخاب  چندگانه و ستونی کد در کروم

 

 

رفتن به خط و یا ستون مورد نظر

زمانی که یک فایل در قسمت Sources باز است کلید ترکیبی Ctrl + O (CMD + O) را بزنید و سپس تعیین کنید به کدام محل از کد قصد سفر دارید: :Line:Column

مثلا اگر بنویسیم :12:9 به خط 12 و کاراکتر 9 می رویم.

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

 

امکان مشاهده تغییرات بصورت زنده

 
ویرایش زنده در قسمت source کروم devtools

 

انتخاب تم تاریک

البته این امکان مربوط به کل Devtools می باشد:

 
 تغییر تم chrome devtools

سوالت رو توی پنل بحث و گفتگو مطرح کن.

2 دیدگاه برای “ترفندهایی برای کار با قسمت Sources در کروم

  1. سلام و عرض ادب
    من یه اسکریپتی دارم که پس از فعال شدن قراره تعداد مشخصی کلیک با فاصله زمانی مشخص کار بکنه
    زمانی که اجراش میکنم اغلب فاصله زمانی و تعداد رو رعایت نمیکنه
    چکارش میتونم بکنم
    اینم اسکریتمه

    // مقادیر زیر را می توانید تغییر دهید
    window.target = ‘.tp-3d-bu-gr.tp-pa-rl.tp-ma-tb-10’
    window.time_hour = “08”; // ساعت کلیک کردن
    window.time_minute = “29”; // دقیقه کلیک کردن
    window.time_second = “50”; // ثانیه کلیک کردن
    window.betweenEachClick = 75; // مشخص کننده این است که بین هر کلیک چقدر زمان نیاز است به میلی ثانیه
    window.beforeStarts = 10; // مدت زمانی که زمان نیاز است تا اسکریپت شروع به اجرا کند به میلی ثانیه در اینجا وارد شود
    window.howManyClicks = 200; // تعداد کلیک هایی که باید انجام شود را در این بخش به عدد وارد کنید
    window.clickedOnce = false;
    window.clickCountNum = 1;
    window.myInterval = ”;
    window.startInverval = ”;

    startInverval = setInterval(isTimeAchivedNow, 0);

    function isTimeAchieved() {
    var currentTimer = $(“.clock.lightre”).text().split(‘:’);
    if (currentTimer[0] == time_hour && currentTimer[1] == time_minute && currentTimer[2] == time_second) {
    return true;
    }
    return false;
    }

    function isTimeAchivedNow() {
    if (isTimeAchieved()) {
    clearInterval(startInverval);
    setTimeout(function(){myInterval = setInterval(checkTimeAndClick, betweenEachClick);}, beforeStarts);
    }
    }

    function getMouseTarget(event) {
    return target;
    }

    function clickIt() {
    $(target).click();
    }

    function checkTimeAndClick() {
    if (clickedOnce == false) {
    clickIt();
    clickedOnce = true;
    clickCountNum++;

    } else if(clickedOnce == true) {
    if (clickCountNum >= howManyClicks) {
    clearInterval(myInterval);
    //clickCountNum = 1;
    clickedOnce = false;
    } else {
    clickIt();
    clickCountNum++;
    }
    }
    }

    document.addEventListener(‘click’, function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement,
    text = target.textContent || target.innerText;
    target_id = target.id;
    if (target_id != ”) {
    console.log(‘#’+target_id);
    } else {
    target_class = target.getAttribute(‘class’);
    classes = target_class.split(‘ ‘);
    classname_selectors = ‘.’ + classes.join(‘.’);
    console.log(classname_selectors);
    }
    }, false);

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *