Отключение отладки Chrome F8/hotkey во время операции перетаскивания

В инструментах веб-разработчика Chrome вы можете сломать любую точку, нажав F8.

Часто я хотел бы сломать и проверить элемент во время операции перетаскивания, нажав F8. Однако это не сработает.

Есть ли собственный ярлык Chrome-way без запуска пользовательского script?

Ответ 1

Нет, окно devtools должно быть сфокусировано, чтобы работать с ярлыками. Пока вы перетаскиваете элемент, это перетаскиваемый элемент, который имеет фокус, а не окно devtools. Лучшее, что вы можете сделать, это создать пользовательский script.

Попробуйте установить тайм-аут в консоли, чтобы запустить отладчик после 2s:

setTimeout(function(){debugger;}, 2000);

И затем выйти из этой функции.

Ответ 2

Есть ли собственный ярлык Chrome-way без запуска пользовательского script?

Нет. Без каких-либо дополнительных шагов DevTools должны быть в фокусе для F8, чтобы приостановить выполнение.

Если вы хотите называть debugger, тогда как DevTools открыт, но не в фокусе, вы можете прикрепить прослушиватель событий для F8 несколько раз. Они будут работать, когда вы перетаскиваете элемент, и вы хотите приостановить выполнение script.

1) Откройте консоль и вручную запустите этот script на целевом сайте перед отладкой:

window.addEventListener('keydown', function(e){ if(e.keyCode === 24) {debugger;} }, false);

Это добавит прослушиватель событий для клавиши F8, которая вызовет debugger.

2) Создайте usercript для Tampermonkey, который запускает выше script на сайтах, которые вы разрешаете, Пример пользователя:

// ==UserScript==
// @name         F8 to debug
// @version      0.1
// @description  Press F8 when the console is open to trigger 'debugger'
// @author       Drakes
// @grant        none
// @require      none
// ==/UserScript==

console.log("Press F8 when the console is open to trigger 'debugger'");
function KeyCheck(e) {
    // Key code 24 is 'F8'
    if(e.keyCode === 24) {
        debugger;
    }
}
window.addEventListener('keydown', KeyCheck, false);