Я часто хочу просмотреть стили элемента, который появляется только при перетаскивании или при нажатии мыши (mousedown event). Как просмотреть стиль элемента с помощью инструментов разработчика Google Chrome?
Откройте инструменты разработчика.
Перейдите в раздел "Источники":
Разверните "Контрольные точки прослушивателя событий" справа:
Добавить прослушиватель событий keydown в разделе клавиатуры:
Теперь начните перетаскивать нужную вещь, и когда она нажмет на клавиатуре любую клавишу, и вы сможете осмотреть перемещаемый элемент.
Вы можете просто нажать F8 во время перетаскивания (и инструменты разработчика открыты)
Поместите контрольную точку в код - внутри обратного вызова события mousedown.
Это приведет к замораживанию приложения, когда вы начнете перетаскивать, а затем вы можете перейти в раздел Element инспектора, чтобы использовать его, как обычно, только теперь он заморожен в начале перетаскивания.
EDIT: вы должны поместить контрольную точку на строку ниже, где будут созданы новые элементы, которые вы хотите проверить, поэтому элементы находятся на DOM к моменту замораживания.
// Raw event
someElement.addEventListener('mousedown', function(ev) {
// Put a breakpoint on any of the lines in here
}, false);
// jQuery for prudence
$(someSelector).on('mousedown', function(ev) {
// Put a breakpoint on any of the lines here
});
dragMethod() {
setTimeout( () => {
debugger;
}, 500)
}
Это приостановит действие перетаскивания, чтобы вы могли продолжить проверку как обычно.
Один из способов сделать это - открыть панель элементов, затем щелкнуть правой кнопкой мыши при перетаскивании. Это открывает контекстное меню и "приостанавливает" эффект перемещения/наведения мыши. Затем после щелчка правой кнопкой мыши вернитесь на панель элементов и найдите элемент, используя функцию поиска.
Это также может быть использовано для проверки эффектов при наведении (это просто быстрее, чем другие методы)
Это можно проверить здесь, например, https://jqueryui.com/draggable/#visual-feedback