15 советов и хитростей инструментов разработчика Chrome, которые вы обязаны знать

[elw00d]

Подскажите, пожалуйста, инструмент для записи таких гифок? А, это перевод…

[xGromMx]

Есть такое www.cockos.com/licecap screentogif.codeplex.com cropper.codeplex.com

[Ceiceron]

gifcam.ru.uptodown.com/ позволяет соорудить любой вариант гифки.

[Fikys]

Для мака, вот уже пол года, использую это http://recordit.co. Доволен как слон.

[InSource]

В monosnap записанный скринкаст можно в gif сохранить, с выбором итогового fps.

[name1ess0ne]

cloudshot.codeplex.com/ попробуйте =)

[edejin]

А это всё только чтобы наживую подправить текущую страницу, или можно сделать полноценный проект, редактировать файлы на диске и тд?

Можно. Добавил пример для пятнадцатого пункта.
Но, лично мне, как минимум, не хватает «Reformate code», «Autocomplete» и «Emmet» обязательно работающего везде! А не только в редакторе HTML!

[yukkat]

По идее здесь можно добавить папку, куда файлы будут сохраняться. Правда, я еще не пользовалась



(опередили))

[Yeah]

казалось бы совсем немного до полноценной IDE осталось

Так уже

[plotnick]

Пожалуй мы наблюдаем развитие очередного витка «браузерных войн», только в этот раз они пытаются переманить не пользователей, а разработчиков, подсовывая им всякие «плюшки».

[grigor7]

После прочтения поста обрадовался — в Firefox'е есть почти все перечисленное.

[Vanger13]

Логично, вроде бы главный разработчик FireBug'a перешел в хром пару лет назад :)

[Captcha]

пользователей Idea эта функция называется «Searching Everywhere» и вызывается двойным нажатием клавиши Shift.

Спасибо, не знал. А чем эта фунциональность отличается от «Go to file» (ctrl+shift+n)?

[sergei-grigorev]

Go to file — найти файл, в IDEA дважды нажать shift — поиск по проекту, включая классы, методов класса, но и даже элементов меню (actions)

[Captcha]

Обалденно! Спасибо за информацию.

[PositiveAlex]

здесь не знаю, а вот в идее, двойной шифт выводит всплывающее окошко, в котором идет смарт поиск — вводишь без пробелов только части слов во вхождении, тот же принцип, как в саблайме. а ищет в результате и файлы и названия классов и названия функций, разделяя их по категориям.

[sabio]

Есть ещё одна архи-полезная штука — можно на любой DOM-элемент повесить брейкпоинт на изменение его контента, атрибута или состояния. (про это упоминается по одной из ссылок, приведённых SelenIT2 выше)

[doozza]

С пунктом 4 (Выборка DOM элементов с помощью консоли) есть неоднозначность.

$() — эквивалентно document.querySelector(). Возвращает первый элемент, соответствующий селектору CSS, например, $ ('DIV') вернет первый элемент DIV на странице.

Дело в том, что если зайти на фронтенд-бедную страницу, то $ будет представлять собой function $(selector, [startNode]) { [Command Line API] }, как и описано в статье. Но если зайти на страницу, где присутствует jQuery, то $ будет уже экземпляром jQuery, а именно function (e,t){return new v.fn.init(e,t,n)}. Наглядно в этом можно убедиться, попросив консоль преобразовать оба вывода к объетам javascript, методом console.dir($) и развернуть. В случае Command Line API это будет маленький объект с парой-тройкой методов, а jQuery-объект будет довольно громоздким внутри. От того, есть ли на отлаживаемой странице jQuery, зависит и вывод, который приводится в пример. А именно, $('div') будет возвращать разный результат: либо первый объект (Command Line API), либо множество объектов jQuery. Очевидно, что $ как jQuery будет существовать только в той области видимости, где он подключен (frame можно менять в консоли).

P.S. Благодарю автора статьи за приглашение и возможность написать этот комментарий.

[spmbt]

Интересно было бы сравнить все эти фичи с Firefox и одной из развитых IDE типа Jetbrains. В IDE это всё есть, а в Firefox очень многое есть (часть — через аддоны).

[Xao]

Я, наверное, старпёр — до сих пор сижу на Opera Dragonfly…

Кстати, фишка старой оперы, о которой никто не знает — Ctrl+Shit+O — открывает консоль ошибок. Обычно там всякий мусор, но лично я пишу все проекты таким образом, чтобы она оставалась чистой.

[DarkByte]

Может кто знает какое расширение, которое позволило бы редактировать контент страницы по типу оперы?
В средствах разработчика хрома на вкладке Sources можно посмотреть код страницы, но почему то не всегда. Например, для данной страницы отображается только javascript, весь html заменён на пустые блоки, но даже где отображается код страницы, его нельзя редактировать, только скрипты.