Rikkster May 1 2022 at 13:26

11 хитростей Chrome DevTools, которые помогут Вам стать Senior FrontEnd-разработчиком

4 min

57K

Website development*JavaScript*Google ChromeHTML*Studying in IT

Tutorial

Translation

+50

Comments 23

Kuch May 1 2022 at 14:08

Вот тут есть многое и даже больше

https://youtu.be/zzkX1LQPddk

Aleksandr-JS-Developer May 1 2022 at 14:53

Прикол с npm - огонь

shornikov May 1 2022 at 20:09

Не сказать что всё, но были важные откровения. Спасибо

Rikkster May 1 2022 at 20:12

Инструменты разработчика Chrome и правда очень богатый функционалом инструмент, здесь автор рассмотрел лишь 11 приёмов, некоторые из них не сильно известны, тоже взял на вооружение 😊

shornikov May 1 2022 at 20:18

Более базовые - мусолено-перемусолено. Наверняка, все это есть в whats new - но кто их читает)

Rikkster May 1 2022 at 21:41

Кстати я изредка читаю Whats new обновлений VSCode и периодически нахожу там что то действительно интересное

Alex-111 May 2 2022 at 06:54

Такая глупенькая кликбэйтовость заголовка "помогут Вам стать Senior". Будто у людей "стать Senior" - это самоцель и они читают статьи только явно направленные на это =) Можно же было сказать "упростят процесс отладки", например.

+12

Rikkster May 2 2022 at 11:46

В данном случае я цитирую автора дословно 😃

onepumpum May 2 2022 at 09:33

Хрому понадобилось столько лет, чтобы добавить банальный replay. Никогда не понимал chrome, как браузер для разработки, сколько не пытался, всегда были проблемы с кешем, в не зависимости от disable cache, постоянно не хватало resend в два клика, но 60% рынка…

arheo_pterix May 2 2022 at 14:28

AuFthor to drink poison gatorade !

Tony-Sol May 2 2022 at 14:28

Имхо, firefox developer edition умеет все тоже самое только лучше

Rikkster May 2 2022 at 14:28

Поделитесь, а в чём выражается это "Лучше"?

Tony-Sol May 2 2022 at 18:26

Например скриншотить можно конкретный html контейнер сразу, без необходимости потом обрезать
Или повторно отправлять запрос можно с изменением параметров/тела запроса

skrikl May 3 2022 at 02:14

Например попап расширения отлаживать в ФФ - верный путь к дев дзену

Hallfire May 4 2022 at 09:34

так в статье, вроде, как раз эти возможности также приведены:

скриншотить можно конкретный html контейнер сразу

пункт 5 последний абзац/картинка
+ то же самое можно просто из контекстного меню нужного узла вызвать

повторно отправлять запрос можно с изменением параметров/тела запроса

пункт 2

SoulSol May 2 2022 at 14:28

Спасибо за информацию.

iMiKED May 4 2022 at 07:21

В Chrome функция переотправки запроса с изменением параметров реализована, конечно, крайне убого. В FireFox в разы удобнее, именно поэтому приходится юзать дев-консоль для FF для таких кейсов(

altocodes Feb 1 2023 at 10:55

А как оно в хроме реализовано? Или вы про fetch?

iMiKED Feb 1 2023 at 11:44

Не претендую на истину в последней инстанции, но я обнаружил такой способ: экспортируешь всё как HAR, потом правишь в текстовом редакторе, потом перетаскиваешь har обратно для реплея.

Если кто-то умеет гораздо удобнее и проще - пожалуйста, поделитесь.

Rikkster Feb 7 2023 at 22:48

Лично я пользуюсь Postman-ом для дебага запросов. Очень удобно.

iMiKED Feb 7 2023 at 23:01

Постманом, конечно, для дебага запросов очень удобно. Сам им пользуюсь для отладки АПИ.

Но с ним не протестируешь фронт.

ivan_man May 4 2022 at 14:08

работаю в Firefox, получается не Senior...

¯\_(ツ)_/¯

popuguytheparrot May 19 2022 at 13:21

Хотелось бы больше примеров связанных с дебагом.

Например узнать какая функция меняет дом элемент. Или что изменяет значение переменной.

Больше примеров работы с дебагом колстека и в таком духе

Show the best of all time