2 заметки с тегом

кодинг

Недавно мне довелось провести пару дней, отлаживая код в IE 11, и во время изучения инструментов разработки этого великолепного браузера я нашёл несколько весёлых интересностей.

Итак, открываем это чудо.

Оно так и называется — «F12». Мне, гадкому маководу, таких вещей не понять, инспектор кода я открываю стабильно по ⌘-Option-I, а до F12 слишком далеко тянуться.

Главное окно — обычный навигатор по коду страницы, ничего особенного, разве что называется он «Проводник DOM». Видимо, у них там свой загон по «проводникам».

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

Вторая иконка — явно консоль, потому что окошко с треугольной скобкой.

Третья — дебаггер, потому что традиционный зачёркнутый жук.

А вот вайфай-роутер на четвёртой иконке ввёл меня ненадолго в заблуждение. Не сразу догадаешься, что там, собственно, «Сеть»:

Да, обыкновенный анализатор запросов с красивыми разноцветными полосочками и новой для меня колонкой «Инициатор» с капитанскими подсказками:

Кстати, очень прикалывает читать подсказки к иконкам в этом самом «F12». Например, иконка форматирования кода в Хроме подписана лаконично — «Pretty print»:

Аналогичная кнопка в ИЕ имеет более пространную и заставляющую задуматься подпись — «Включить качественную печать»:

Впрочем, вернёмся к проблемам навигации. На очереди иконка с... И вот уже начинаются варианты. Лобовое стекло автомобиля с дворником? Весы? О, точно, спидометр! А что бы он мог значить? Скорость загрузки страницы? Это уже было на вкладке «Сеть». Скорость работы яваскрипта? Профайлер? Да, это должен быть профайлер, нажимаем:

«Отклик пользовательского интерфейса» с одинокой надписью «Start profiling to begin a performance session». Когда я впервые путешествовал по этим дебрям, то как раз искал профайлер и обрадовался, что вот он, родимый. Давай же, дружок, начнём нашу первоманс-сессию, что бы это ни значило!

Падабум. Ошибся номером, это не профайлер, а какая-то дрянь с непонятными графиками. Наверное, инструмент полезный, когда ты делаешь сайт с просраллаксом или когда сайт тормозит от нагруженной анимации. Но сейчас другая ситуация: мне нужен профайлер.

И я никогда бы не подумал, что профайлер — это шестерёнка с часами. Хоть убей, я обошёл всё, кроме этой кнопки, потому что упорно думал, что это какие-то настройки чего-то там. И в последней надежде я нажал на неё:

Хвала Создателю! «Профилировщик»! Иди сюда, дай я тя расцелую, хоть у тебя там сплошные кальки с английского в заголовках столбцов.

Поехали дальше. Фотоаппарат. Первая ассоциация — это что-то про работу с вебкой. Наверное, я сейчас туда щёлкну, включится камера, и на меня будет смотреть моя рожа. Ну-ка...

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

Вот вам для сравнения вкладка «Timeline» из Хрома, где, хоть и плотновато, но более приятно объединены «Память» и «Отклик пользовательского интерфейса»:

И тут мы подходим к самому сладкому — монитору и, видимо, телефону. Только телефон почему-то высотой с монитор, но не будем придираться. Скорее всего, это про адаптив. Или за этой кнопкой скрывается эмулятор виндофона?

Почти угадал: не эмулятор виндофона, а просто «Эмуляция». Приходишь на эту вкладку и эмулируешь себе.

Вещь очень полезная, но, как и везде в этом окошке, полная неожиданностей. Вот «Режим документов» — это эмуляция ранних версий IE, за одним лишь исключением:

Есть мнение, что в Майкрософте осознали свою ошибку и про IE 6 решили забыть. И чтобы мы тоже забыли. Поэтому, пожалуй, будем отлаживать сайты только под IE 5 и IE 7-11. В общем, божественная логика, потому что со «строкой агента пользователя» («агент пользователя» — это User-Agent, ну ты понял) всё в порядке и даже больше:

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

И напоследок ещё один небольшой урок словесности. Какая бывает ориентация? Я сейчас про экран и печать. Давайте, вспоминайте, их две: портретная и... Что, альбомная? Садись, два. Правильный ответ — «Пейзажная»:

Вот и всё, мы бегло окинули взглядом обитель зверя под названием «F12 Developer Tools», и с навигацией в нём всё очень не то чтобы плохо, но странно. Я пользовался виндой лет десять и не помню, чтобы в ней когда-либо были проблемы с локализацией. Если ставишь русскую винду, то там всё по-русски, и это даже читать можно было без особых напрягов. А в этом IE11 сплошная мешанина из русского языка, калькированного английского и просто английского, где переводчики решили просто не заморачиваться.

Сам инструмент очень удобен, я в итоге получил от него всё, что хотел, и поправил все баги, хотя до сих пор недоумеваю, как можно было так неочевидно оформить его вкладки. Да, возможно, очень тяжело нарисовать правильные иконки, которые были бы понятны всем, но зачем их тогда вообще рисовать?

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

Хром (а от него и Яндекс.Браузер с новой Оперой):

Сафари:

Старая Опера:

Фаерфокс:

И никаких гвоздей. Писать слова на кнопках — это не так плохо.

Хороших вам выходных, пупсики.

Caps Lock — самая неспользуемая по назначению клавиша на макбучной клавиатуре, поэтому на неё можно повесить всякие вкусные плюшки, чтобы работать стало чуточку проще. У меня на капсе висит Терминал, а в сочетании с ⌘ или ⌥ (option) открывается SourceTree или Sublime Text. Очень удобно при редактировании кода, не надо тыркаться между окошками, просто открываешь-скрываешь нужную программу левым мизинцем и большим пальцем.

Для начала качаем программу PCKeyboardHack. На сайте этих ребят есть подробная инструкция по установке и запуску.

Программа нужна всего для одной вещи: превратить Caps Lock в F19. (Да, на большой маковской клавиатуре есть ряд функциональных клавиш с F13 по F19)

F19 имеет код 80, его и вписываем в нужную строчку:

Идём в Системные настройки → Клавиатура → Клавиши модификации и ставим капслоку «Никакого действия»:

Закрываем и забываем. Качаем Snap из Аппстора. Вообще его основная фишка в том, чтобы открывать программы из дока по сочетанию клавиш с ⌘, ⌥ (option), шифтом или контролом. Но нам это не надо, а тем, у кого стоит Бирмана раскладка и подавно, потому что Snap забирает себе оба ⌥ и не даёт печатать красивые стрелочки.

Ставим Snap, открываем. Кстати, он появляется в верхнем меню, откуда все настройки можно отредактировать:

И поехали. Для примера повесим на капс запуск Терминала (бест практис):

Отжимаем кнопки Shift, Control, Option и Command на вкладке Automatic, чтобы не мешали. Идём на вкладку Manual, нажимаем плюсик. Находим Терминал, жмём Open. Терминал добавился в список программ. Нажимаем на поле Click to record shortcut. И на клавиатуре жмём Caps Lock. Если всё сделали правильно, в поле появится «F19», что закономерно, потому что макось теперь думает, что Caps Lock — это F19.

Прекрасно. Теперь Терминал открывается и скрывается по одному лишь нажатию капса.

Попробуем теперь повесить другую программу, например, Source Tree, на сочетание ⌘Caps Lock:

Ищем нужную программу. Для указания сочетания клавиш можно, кстати, прямо тут ткнуть Click to record shortcut внизу формы. Нажимаем на клавиатуре сочетание клавиш ⌘Caps Lock. В поле ввода, соответственно, появляется «⌘F19». Отлично, вы молодец.

Таким нехитрым образом можно ещё несколько программ повесить на капс.

Чем это удобно для программиста? Когда, например, работаешь за одним монитором, пишешь в редакторе код какого-нибудь сайта, хочешь этот код потестить и, не отрываясь от клавиатуры, скрываешь редактор альт-капсом, обнажая браузер. А потом закоммитить хочешь, и комманд-капсом открываешь гуёвый гит, чтобы посмотреть исправления и пушнуть. А потом надо спуллить ветку на сервере по асасашу, жмёшь капс, открывается Терминал, ты в нём шаманишь, и снова нажимаешь альт-капс, чтобы открыть редактор и продолжить писать код. Первое время, конечно, путаешься, но потом привыкаешь.

Чем это удобно для не-программиста? Да тем же. На капс можно повесить Файндер, текстовый редактор, Заметки, Скайпик, почту, браузер и работать на небольшом экране макбука, не задрачивая Mission Control и не листая вправо-влево рабочие столы.

Наслаждайтесь, господа.