Pull to refresh

VK Tech Talks · Front End: митап для фронтенд-разработчиков

VK corporate blog Website development *Conferences

28 июля в 19:00 приглашаем фронтенд-разработчиков на митап. Поговорим про безопасный деплой на тысячи серверов, расскажем про интеграцию почты в мессенджер и рассмотрим новейшую панель Performance Insights в Chrome DevTools.

Встреча пройдёт в гибридном формате: вы можете приехать в штаб-квартиру VK в Москве или подключиться к онлайн-трансляции в сообществе VK Team ВКонтакте. 

Чтобы поучаствовать в мероприятии, зарегистрируйтесь на сайте.

Познакомиться с программой
Total votes 1: ↑1 and ↓0 +1
Views 599
Comments 0

Инструментирование Google Chrome через WebSocket API

Website development *Ruby *Google Chrome
Translation
image Взаимодействие с браузерами никогда не было работой для слабонервных: около полудюжины различных API, различные механизмы IPC, и разные возможности у разных поставщиков. Такие проекты, как WebDriver, пытаются абстрагироваться от этой сложности, к тому же в Сети можно найти десятки других «безголовых» драйверов, использующих WebKit или иные движки. В настоящее время в работе даже находится спецификация W3C на WebDriver.

Инструментирование Google Chrome


Тем не менее, в то время, как создание общего решения является сложной задачей, оказалось, что инструментирование Chrome очень просто, — как я недавно обнаружил при исследовании некоторых вопросов, связанных с сетевыми задержками. Начиная с 18 версии, Chrome теперь поддерживает протокол удалённой отладки v1.0, который предоставляет все возможности браузера с помощью обычного WebSocket!
/Applications/Path To/Google Chrome --remote-debugging-port=9222 # OSX
$> curl localhost:9222/json

[ {
   "devtoolsFrontendUrl": "/devtools/devtools.html?host=localhost:9222&page=1",
   "faviconUrl": "",
   "thumbnailUrl": "/thumb/chrome://newtab/",
   "title": "New Tab",
   "url": "chrome://newtab/",
   "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/1"
} ]
Читать дальше →
Total votes 39: ↑36 and ↓3 +33
Views 12K
Comments 8

Хитрости Chrome DevTools

Client optimization *Google Chrome
Tutorial


Илья Григорик из компании Google собрал подборку малоизвестных функций Chrome DevTools, которые можно использовать для оптимизации производительности. Илья также упоминает несколько сторонних плагинов и библиотек, полезных для разработчика, и многочисленные другие хитрости: например, возможность дебаггинга iOS-приложений или кода, исполняемого на подключённом Android-устройстве.
Total votes 36: ↑28 and ↓8 +20
Views 22K
Comments 14

Удобное редактирование CSS (Chrome + Save CSS + autoIt)

Website development *CSS *
Recovery mode
Sandbox
Многие знают, что в Chrome Development Tools встроен удобный редактор CSS, отображающий изменения мгновенно. Единственная проблема – отсутствие возможности удобного автоматического сохранения изменений.

Для решения задачи автосохранения существуют три расширения для Chrome: DevTools Autosave, Tincr и Save CSS. Так как работа с файлами на диске у расширений невозможна, все они перехватывают событие изменения CSS, а текст измененного файла (или только фрагмент в случае DevTools autosave) отправляется запросом на localhost, на котором уже серверная программа сохраняет непосредственно в файл.

Вышеперечисленные расширения для сохранения в файл используют скрипты на Python, Node.js или Ruby. Мне же, как PHP программисту не связанному с этими языками хотелось простое One click решение для Windows, без необходимости установки ненужных мне в своей работе серверов.

Поэтому я решил написать простенькую утилиту под Windows, решающую эту задачу.
Читать дальше →
Total votes 29: ↑22 and ↓7 +15
Views 16K
Comments 27

Сниппеты для Chrome DevTools

Website development *JavaScript *Google Chrome
Возможности встроенного в браузер инструмента Chrome Developer Tools можно расширить с помощью сниппетов. Это ускоряет разработку и упрощает рабочий процесс. Хорошая коллекция сниппетов есть на GitHub'е.

Сниппеты в Google Chrome


Подробно о функциях сниппетов можно почитать в официальной документации Chrome. А вот краткая инструкция:

  1. Зайти в «chrome://flags» — Отметить «Enable Developer Tools experiments».
  2. Открыть DevTools: «Settings» — «Developer Tools Experiments» — Отметить «Snippets support».
  3. После перезагрузки во вкладке DevTools «Sources» появится «Snippets», где можно управлять сниппетами:

image
Читать дальше →
Total votes 51: ↑49 and ↓2 +47
Views 29K
Comments 13

Отладка асинхронного JavaScript с помощью Chrome DevTools

Website development *JavaScript *Google Chrome
Translation

Вступление


Возможность асинхронной работы с помощью callback-функций(далее просто возвращаемых функций) — отличительная особенность JavaScript. Использование асинхронных возвращаемых функций позволяет вам писать событийно-ориентированный код, но так же добавляет кучу проблем, ведь код перестает выполняться в линейной последовательности.

К счастью, теперь в Chrome Canary DevTools вы можете отслеживать весь стек вызовов асинхронных функций в JavaScript!
Под катом 10Mb трафика
Total votes 72: ↑71 and ↓1 +70
Views 34K
Comments 18

Проблемы поиска утечки памяти в веб-приложении с помощью Chrome DevTools

Website development *JavaScript *Debugging *
Sandbox
Браузер Google Chrome поставляется с превосходными инструментами для разработчика, они же есть в Яндекс.Браузере, новой Опере, и в других браузерах, основанных на базе Chromium.

Среди них есть потрясающие инструменты для работы с памятью, ознакомиться с которыми можно в статье пользователя Panya«Как находить и устранять утечки памяти на примере Яндекс.Почты».

Javascript хранит объект в памяти до тех пор, пока на него есть хоть одна ссылка. Как только вы удаляете все ссылки на объект, он уничтожается сборщиком мусора.

Таким образом, чтобы удалить объект, нужно удалить все ссылки на него.

Это кажется очень простым, но есть несколько достаточно неожиданных «мест» где могут храниться ссылки на объекты, тем самым задерживая их удаление, и создавая утечку памяти.
Читать дальше →
Total votes 22: ↑20 and ↓2 +18
Views 21K
Comments 4

Суперсилы Chrome DevTools

2ГИС corporate blog JavaScript *Google Chrome


Я работаю в команде Онлайн. Мы делаем веб-версию справочника 2ГИС. Это долгоживущий активно развивающийся проект, в котором JavaScript используется как основной язык как на клиенте, так и на сервере.

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

В этой статье я расскажу, как мы используем стандартные браузерные инструменты разработчика для эффективной отладки и исследования. Эти рецепты направлены в первую очередь на изучение приложения снаружи-внутрь, поэтому подойдут для любого проекта.
Читать дальше →
Total votes 83: ↑78 and ↓5 +73
Views 69K
Comments 13

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

Google Chrome
Translation
Сегодня Google Chrome является самым популярным браузером среди веб разработчиков. С быстрым, шести недельным, циклом релизов и мощным набором постоянно расширяющихся инструментов разработчика, превратившим браузер в инструмент, который вы обязаны иметь. Большинство из вас, вероятно, знакомы со многими его функциями, такими как «живое» редактирование CSS, используя консоль и отладчик. В этой статье мы с вами рассмотрим 15 захватывающих советов и хитростей, которые позволят улучшить вашу производительность еще больше.
Читать дальше →
Total votes 88: ↑85 and ↓3 +82
Views 194K
Comments 23

Двенадцать полезных Chrome DevTools Tips

Инфопульс Украина corporate blog Website development *JavaScript *Google Chrome
Translation
В данной статье мы рассмотрим некоторые функции инструментов разработчика Chrome. Конкретно я использую Chrome Canary и вам советую. И не потому, что это отсылка на маленьких милых птиц, которые пожертвовали своими жизнями чтобы мы могли добывать свежий уголь.

Некоторые из DevTools функций вы возможно не знали. Я буду очень счастлив, если хотя бы одну из них вы найдете для себя полезной.

(В статье ниже присутствуют анимированные гифги, которые начинают раздражать после первого цикла. Поэтому я советую открыть dev tools и удалить DOM ноды, которые отвечают за изображения.)

Итак, поехали:

Копируем переменную в буфер обмена


Об этой возможности я узнал из комментариев, и считаю ее достаточно полезной чтобы быть описанной в начале. Иногда бывает нужно скопировать содержимое переменной в буфер обмена. Например html код или json объект. Для этого можно использовать copy функцию.

copy (someVariable)

Теперь текстовое представление переменной скопировано в буфер обмена.
Читать дальше →
Total votes 71: ↑69 and ↓2 +67
Views 76K
Comments 17

Web crawler с использованием Python и Chrome

Python *Google Chrome Web services testing *
Sandbox
Добрый день, дорогие друзья.

Недавно, сидя на диване, я задумался о том, что хочется мне сделать своего паука, который что-то бы смог качать с веб сайтов. Но качать он должен был бы не простой загрузкой, а как настоящий милый добрый браузер (т.е. JavaScript чтобы исполнялся).

В моей голове всплыли такие интересные штуки, как Selenium, PhantomJS, Splash и всякое подобное. Все эти штуки были мне немного втягость. Вот какие причины я выявил:

  • Дело в том, что я хотел бы писать на своем любимом питоне, потому что очень не люблю JavaScript, а это уже означает, что большая часть уже не работала бы (или пришлось их как-то склеивать, что тоже отстой).
  • Еще эти безголовые браузеры обновляются как когда.
  • Но вот Selenium очень милая штука, но я не нашел, как там отслеживать загрузку страниц, или хотя бы адекватного способа выдрать куку или задать её. Слышал, что многие любители селениума инжектят в страничку JavaScript, что для меня дико, потому что где-то полгода назад я делал сайтик, который отрывал любые JavaScript вызовы с сайта и потенциально мог определять моего паука. Мне бы очень не хотелось таких казусов. Хочется чтобы мой паук выглядел как браузер максимально точно.

Читать дальше →
Total votes 42: ↑39 and ↓3 +36
Views 41K
Comments 44

Обзор всех инструментов разработчика Chrome DevTools

SimbirSoft corporate blog JavaScript *Google Chrome
Tutorial
Начинающему JS разработчику чаще всего не понятно назначение всех инструментов, которые ему предоставляет браузер. Да и относительно опытный разработчик, если в основном решает однотипные задачи вряд ли может похвастаться, что регулярно пользуется всеми возможностями, которые ему предоставляют инструменты разработчика браузера. Однако познакомиться с ними было бы крайне полезно хотя бы для того, чтобы при решении каких то новых проблем Вы сразу же знали где искать ответ, а более подробно изучив тонкости каждого из них, Вы сможете поднять свою производительность труда на новый уровень.

Отдельно бы хотелось отметить, что DevTools находится в постоянной активной разработке, поэтому название инструментов/панелей/вкладок, как и их наличие в целом или способ доступа к ним со временем может быть изменен. Поэтому не стоит пугаться если, на момент прочтения Вами этой статьи, DevTools будет незначительно отличатся от того, что указано в описании или на скриншотах в этой статье.
Читать дальше →
Total votes 16: ↑13 and ↓3 +10
Views 134K
Comments 1

Трассировка и Javascript

JavaScript *Google Chrome Server optimization *Node.JS *


Когда-нибудь трассировали рантайм вашего приложения? Знаете сколько запросов делает вон тот серый ендпоинт, который? А как долго вычитываются те кросс-референсы на схожий тип ресурсов с каждой странички сущностей, которую нужно вернуть в запрос? Пытались ли вы замерить как долго приходится ждать пользователю из-за опциональных полей запроса, которые он время от времени добавляет? Задумывались ли вы что будет если запараллелизировать эти шесть запросов к тем двум базам данных?

Если что-нибудь выше звучит интересно, или как минимум знакомо — добро пожаловать под кат.
Читать дальше →
Total votes 22: ↑22 and ↓0 +22
Views 11K
Comments 0

Вышел Chrome 69 с генератором случайных паролей

GlobalSign corporate blog Information Security *Google Chrome

Chrome DevTools в 2018 году

К десятилетию Chrome компания Google выпустила масштабное обновление — Chrome 69 с обновлённым интерфейсом, новым менеджером-генератором случайных паролей, ответами в «омнибоксе» без захода на поисковый сайт, поиском вкладок (если у вас открыто много вкладок и вы хотите найти нужную) и другими изменениями. К сожалению, новая версия не стала таким праздником, на какой рассчитывали создатели.
Читать дальше →
Total votes 28: ↑24 and ↓4 +20
Views 21K
Comments 86

Ускоряем фронтенд. Когда много запросов к серверу — это хорошо

ITSumma corporate blog High performance *Website development *Client optimization *Development of mobile applications *
Translation
Tutorial
В этой статье описываются некоторые методы ускорения загрузки фронтенд-приложений, чтобы реализовать отзывчивый, быстрый пользовательский интерфейс.

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

Процесс загрузки разделим на три этапа. Для каждого этапа сформулируем общие стратегии повышения производительности:

  1. Начальная отрисовка: сколько времени требуется, чтобы пользователь увидел хоть что-то
    • Сократить запросы, блокирующие рендеринг
    • Избегать последовательных цепочек
    • Повторно использовать соединения с сервером
    • Сервис-воркеры для мгновенного рендеринга
  2. Загрузка приложения: сколько времени требуется, чтобы пользователь смог использовать приложение
    • Разбить пакет приложения на части. Загружать только необходимые ресурсы. Максимизация попаданий в кэш
    • Проверить, что хэши частей пакета не меняются без необходимости
    • Запрашивать данные для страницы до загрузки всего приложения
    • Не блокировать рендеринг загрузкой второстепенных данных
    • Рассмотреть рендеринг на стороне сервера
  3. Следующая страница: сколько времени требуется для перехода на следующую страницу
    • Запрашивать дополнительный код до того, как он понадобится
    • Кэшировать и повторно использовать данные на клиенте
Читать дальше →
Total votes 31: ↑31 and ↓0 +31
Views 20K
Comments 2

Профессиональное применение инструментов разработчика Chrome: 13 советов

RUVDS.com corporate blog Website development *JavaScript *Google Chrome Browsers
Translation
Автор статьи, перевод которой мы сегодня публикуем, хочет поделиться советами по профессиональной работе с инструментами разработчика браузера. А именно, эти советы рассчитаны на программистов, которые по какой-то причине решили, что их основным браузером будет Google Chrome.


Читать дальше →
Total votes 58: ↑57 and ↓1 +56
Views 27K
Comments 12

Парсим любой сайт за считанные секунды. Как достать нужную информацию с сайта используя Selenium, XPath и Proxy Sever

Google Chrome C# *Web services testing *
Sandbox
Дарова, Хабр! Около года назад я решил заработать на ставках на спорт используя свои знания математики и программирования и тогда я наткнулся на небольшую проблему — как же достать нужную мне информацию с сайта? Как парсить веб-страницы? В этой статье я расскажу простыми словами каким тонкостям я научился.


Читать дальше →
Total votes 21: ↑12 and ↓9 +3
Views 28K
Comments 12

Как мы создали вкладку WebAuthn в Chrome DevTools

SkillFactory corporate blog Website development *JavaScript *Google Chrome
Translation
Сегодня, в преддверии старта нового потока курса по JavaScript, делимся с вами полезным переводом статьи о том, как разрабатывалась вкладка WebAuthn в Chrome DevTools, какие решения принимались и почему, с какой проблемой столкнулись разработчики.

image

Приятного чтения!
Total votes 16: ↑14 and ↓2 +12
Views 2.1K
Comments 1

10 советов как повысить продуктивность, используя инструменты разработчика Chrome

Google Web Toolkit *Google Chrome
Translation

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

Читать далее
Total votes 7: ↑6 and ↓1 +5
Views 9.7K
Comments 11
1