Привет:) Сегодня мы собираемся узнать практически о том, как мы можем использовать инструменты разработчика Chrome, если вы в домен, связанный с WebDev/Security, то это более выгодно для вас. Итак, начнем Первое, что вам нужно, – это последняя установленная Chrome Browser, затем выполните правой кнопкой мыши и ищите Осмотреть или делать Ctrl+shift+i Затем вы можете увидеть раздел «Инструменты разработчиков». В этом изображении выше в предпочтениях вы можете делать основные вещи, такие как изменения темы и форматирование отключения/включения JavaScript и в Рабочая пространство Раздел вы можете добавить свой собственный ReactJS или любой проект, и вы можете изменить код из своего браузера также, а в разделе экспериментов это предстоящие функции, вы можете проверить его в своем браузере в Устройства Вы можете добавить пользовательские устройства или существующие устройства для проверки в разных устройствах, как ведет себя или работает ваш веб-сайт/приложение для веб-сайта, и при дросселировании вы можете настроить скорость подключения к Интернету в соответствии с вашими потребностями и в ярлыки Вы можете использовать Ctrl+L Для очистки консоли и еще много ярлыков, чтобы сохранить ваши секунды/минуты:)
* Секция элементов * Если вы перейдите в раздел «Элементы» и щелкнули правой кнопкой мыши к заголовку или любой тег, вы можете отредактировать его с помощью правой кнопки, а затем ниже Thing А также, если вы выберете в конкретный тег или абзац, то после щелчка правой кнопкой мыши вы можете скопировать все его стили CSS, улучшить его и использовать его для себя или для своего проекта, например, внедрение анимаций Twitter для кнопок в вашем веб -приложении а также вы можете сделать дубликацию или копию элементов
Источники В разделе «Источники» вы можете создать точки останова для нашего кода, которые должны выполнять или нет или остановить только выполнять, а не отладка как это
Если у вас есть UL (неупорядоченный список, и вы хотите скопировать этот элемент JS Path Path Path, то вы можете получить путь JS по этому поводу) И вы можете удалить этот элемент, используя эту вещь
function onClickEvent(){
let mycount=1;
alert("your a best learner"+mycount+'excercise');
document.querySelector("body > ul > li:nth-child(2)").remove();
}
Мы используем его как IDE (интегрированная среда разработки) Chrome Workspace.
Консоль «Сохранить журнал при навигации» будет сохранять консоль по умолчанию. Вы можете очистить журнал консоли, нажав кнопку «Очистить» в правом верхнем правом или открытии и закрыв инструменты. Мы можем использовать console.log для отладки и для решения ошибок, а также для более точно отображения данных с использованием console.table (). Сеть В этом разделе вы можете включить дросселирование, как это изменить вашу сеть в браузере а также вы можете проверить, сколько времени требуется для загрузки
Приложение Если открыть то же приложение на других вкладках, то эти данные должны быть обмены, которые называются LocalStorage и данные, которые ограничены только для этого сеанса, называемые SessionStorage, мы можем сохранить эти данные для этого сеанса Вы можете добавить элементы в SessionStorage, используя это
JS SessionStorage.setItem («Имя», «Кришна»); неопределенный
Производительность Для знания большей производительности, используя, вы можете ссылаться на web.dev Безопасность Вы можете узнать больше о сайте обеспечено или нет, какие сертификаты, такие как Digicerti сайт использует.
Память Мы можем сделать снимки кучи, чтобы увидеть его, чтобы сделать снимки JS Heap, проанализировать графики памяти, сравнить снимки и найти утечки памяти. Знайте больше тепла
Спасибо за чтение, а также я открыт для работы в веб-разработке, и у меня есть опыт работы с React (8 месяцев) Если у кого -то есть возможность, связанная с этими областями, дайте мне знать, что я увлечен изучением новых вещей и реализации проектов. желаю отличного дня:)
Оригинал: “https://dev.to/krishnakakade/getting-started-with-chrome-developer-tools-fin”