Обновить
46.86

Google Chrome

Браузер от Gooogle

Сначала показывать
Порог рейтинга
Уровень сложности

Используем DevTools в headless Chrome

Время на прочтение4 мин
Количество просмотров4.7K


Если вы когда-нибудь использовали Puppeteer, то наверняка сталкивались с неудобной отладкой скриптов на удалённых нодах headless Chrome. Часто так не хватает консоли, а лучше полноценной панели инструментов для изучения запросов и логов… хотя постойте. Puppeteer сам по себе построен поверх Chrome DevTools Protocol, значит, наверняка есть куча решений для проброса данных в локальные DevTools? А вот и нет. Есть только два более-менее рабочих инструмента: отладчик для browserless.io и pptrconsole. Второй по функционалу и стабильности уже далеко впереди, поэтому поговорим про него.
Читать дальше →

Отключение Google FloC на вашем веб-сайте

Время на прочтение4 мин
Количество просмотров14K

Google недавно объявил о развертывании технологии Federated Learning of Cohorts (FLoC) в рамках инициативы Privacy Sandbox, направленной на замену сторонних файлов cookie новым методом профилирования пользователей, который собирает данные, генерируемые непосредственно браузером.

Организация Electronic Frontier Foundation (EFF) выпустила обзор FLoC и связанных с ним угроз, а также разработала полезный инструмент для проверки, используется ли браузер пользователя для сбора данных и снятия цифрового отпечатка устройства. 

Читать далее

Сборники рецептов jq

Время на прочтение4 мин
Количество просмотров20K

Мы все иногда сталкиваемся с необходимостью вытащить нужную информацию из JSON или YAML файлов. Многие уже познакомились с мощью утилиты jq. Судя по публикациям на Хабре, напр. https://habr.com/ru/post/525808/, и вопросам в qna, тема до сих пор актуальна.

Мне в очередной раз пришлось вспомнить специфический DSL jq чтобы восстановить накопленные за долгое время закладки в Хроме, не сохранённые при апгрейде. Точнее, файл Bookmarks в формате .json сохранился, но ни в какую не хотел импортироваться в новый Хром. Хочу поделиться рецептом решения этой проблемы, заодно упорядочить собранные в разных местах миниатюрные скрипты для решения похожих проблем.

читать далее

Генерация картинок в коде

Время на прочтение3 мин
Количество просмотров7.3K

Всем привет! В этой статье я расскажу про процесс автоматизации изображений в коде, написание гема и ускорение рутинных задач.

Читать далее

Как я нашел баг в Google Meet

Время на прочтение7 мин
Количество просмотров6.1K

Это отладочное приключение Брюса Доусона, разработчика Chrome и блогера, позволило снизить загрузку процессора при работе с веб-камерой примерно на 3%  - настоящая помощь для тех, кто полагается на видеозвонки.

Читать далее

DevTools для «чайников»

Время на прочтение6 мин
Количество просмотров214K


Недавно на базе Владимирского Института информационных технологий и радиоэлектроники прошла очередная встреча VLADIMIR TECH TALKS. Технологический митап, организованный международным IT-разработчиком Altenar в формате открытого и доверительного разговора про насущные проблемы в области разработки ПО, собрал немало участников из числа начинающих и продвинутых программистов. Делимся содержанием наиболее интересных докладов.

Наиболее заметным стало выступление независимого WEB-разработчика Антона Грибанова. Он поделился своим опытом использования DevTools. На самом деле, обзорных статей по заявленной тематике для профессионалов немало. С ними легко можно ознакомиться на профильных ресурсах (тык, тык, тык, тык).

Данная статья, прежде всего, обращена к тем, кто еще находится в самом начале своего пути к программистскому Олимпу. Поэтому, если вы матерый разработчик, вас вряд ли заинтересует дальнейшее повествование. Хотя, вы можете поделиться своим богатым жизненным опытом в комментариях к публикации.
Читать дальше →

Расширение для Google Chrome: управляем скиллами друзей в LinkedIn

Время на прочтение5 мин
Количество просмотров2.8K

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

Данное расширение позволяет прожимать подтверждения скиллов на странице друга или отменить подтверждения скиллов. Полезно когда вместо десятков нажатий на "плюсики" Вы нажимаете только на одну кнопку расширения.

Читать далее

Как освободиться от Яндекс-дзена и прилипшей строки в поиске

Время на прочтение4 мин
Количество просмотров26K
imageРечь пойдёт о юзер-стилях, помогающих программистам не отвлекаться на Дзен и не закрывать часть окна браузера поисковой строкой Яндекса.

Нет сомнения, что читатели сайта всё это знают, но не часто реагируют на желания Яндекса улучшить жизнь большинства. Я тоже, хотя когда-то писал эти стили для себя, уже почти год не реагировал на ребрендинг Главной Яндекса, когда окончательно убрали настраиваемые Виджеты и ввели Дзен. Но сегодня навёл некоторый порядок (когда окончательно стало понятно, что там особо нечего смотреть, а если и есть, то не в режиме рекламы), чтобы Яндексом было эффективнее пользоваться).

Появление Дзена и самозапускающихся видео изрядно мешает программисту или любому исследователю, который пришёл на сайт за запросом, а тут — картинки и видео начинают показывать своё и отбирают с таким трудом достигнутое сосредоточение на работе ) или просто время.
Читать дальше →

Google удалил расширение ClearURLs из Chrome Web Store

Время на прочтение2 мин
Количество просмотров55K

Google по каким-то причинам удалил популярное расширение ClearURLs из Интернет-магазина Chrome.

Разработчик подал апелляцию в Google против блокировки расширения и получил ответ: в копии электронного письма, предоставленного разработчиком, Google утверждает, что описание расширения «слишком подробное» и нарушает правила интернет-магазина Chrome.

Читать далее

Chrome OS исполняется 10 лет. Google в честь юбилея добавляет новые функции

Время на прочтение3 мин
Количество просмотров8.4K

Для многих читателей Хабра Chrome OS появилась как будто вчера. Ну хорошо, не вчера, но совсем недавно. Хотя облачной операционной системе исполнилось уже 10 лет. За это время ей несколько раз предсказывали скорую гибель, но этого так и не произошло, проект развивается и совершенствуется.

В честь памятной даты Google представила новые функции, о которых поговорим под катом.
Читать дальше →

Как обойти ограничение браузера и прикрепить сразу два файла и более: мультидобавление файлов

Время на прочтение4 мин
Количество просмотров12K
Привет, Хабр!

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

Возьмём по умолчанию Chrome v.88. Задача звучит так:

  • Сгенерировать файлы на стороне клиента.
  • Скачать все сгенерированные файлы одним кликом.

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


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

Вот небольшой пример скачивания с предварительным сжатием из документации:

var zip = new JSZip();
zip.file("Hello.txt", "Hello World\n");
var img = zip.folder("images");
img.file("smile.gif", imgData, {base64: true}); zip.generateAsync({type:"blob"}).then(function(content) {
// see FileSaver.js
saveAs(content, "example.zip"); });

«А где тут нетривиальность?» — спросите вы. И будете правы. А если речь идёт об одновременном скачивании с сайта двух, трёх или десяти файлов? Например: есть лист в селекте, в котором можно выбрать определённое количество файлов для скачивания. Введём дополнительное условие: у пользователя нет установленного архиватора, поэтому вариант со сжатием в архив отбрасываем. Как решить такую задачу?
Читать дальше →

Новая утечка истории браузера через favicon

Время на прочтение3 мин
Количество просмотров8.4K

Недавно наткнулся на это исследование pdf (по его мотивам уже была статья на хабре), после прочтения, решил поискать более интересные способы использования F-Cache. Объективно, схему с редиректами никто в здравом уме не будет ставить на свой сайт. Это утечка, но утечка представляющая больше теоретический интерес, чем практический(имхо).

Обозначил цель(найти способ проверить F-Cache через javascript) и начал поиски. В ходе экспериментов выделил несколько способов это сделать, но опишу самый интересный, на мой взгляд.

Ссылка на чекер под катом.

Читать далее

Внедрение E2E-тестирования с Puppeteer и Jest

Время на прочтение4 мин
Количество просмотров7.7K

Привет, Хабр!

Хотим поделиться краткой историей о том, как мы на одном из проектов «Рексофт» пришли к написанию автотестов, и почему сделали акцент именно на e2e-тестах.

Читать

Ближайшие события

Прогрессивный рендеринг для лучшей производительности веб-приложений

Время на прочтение6 мин
Количество просмотров17K

Понимание концепций рендера веб-страниц и измерение производительности рендера с помощью Chrome DevTools




Не важно, насколько хорош ваш сайт; если его загрузка занимает слишком много времени, никто не будет ждать, чтобы его увидеть. Если ваш сайт загружается более 3 секунд, есть большая вероятность, что вы потеряете часть посетителей. Но знаете ли вы, что можно значительно улучшить время загрузки своего веб-приложения, используя прогрессивный рендеринг? Прогрессивный рендеринг не только увеличивает скорость загрузки, но и решает некоторые серьёзные проблемы в методах рендеринга на стороне клиента и на стороне сервера. Чтобы лучше понять прогрессивный рендеринг, давайте посмотрим, как работает рендеринг на стороне клиента и на стороне сервера.
Приятного чтения!

Невменяемый, необъятный масштаб браузеров

Время на прочтение3 мин
Количество просмотров73K

Увидев вот эту публикацию про браузерные войны, я хотел бы представить альтернативное наблюдение за тем, как мы докатились до такой жизни. Но Дрю ДеВолт уже всё сказал за меня.

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

С помощью wget я скачал все 1217 спецификаций W3C, опубликованных на текущий момент. Существенная часть из них должна быть реализована в браузере, чтобы современный веб работал. Я подсчитал объём этих спецификаций. Как думаете, насколько сложен современный веб?

Читать далее

Браузерные войны 2021

Время на прочтение9 мин
Количество просмотров24K

Дисклеймер: речь в данной статье не идёт о браузерных войнах как таковых. Скорее, автор пытается объяснить устройство и механизм работы браузеров простым языком (прим. переводчика).

Наблюдая за тем, как Google Chrome планомерно подавляет конкуренцию на рынке браузеров, Нил Мор пытается проанализировать причины его популярности, а также объясняет, почему не стоит им пользоваться.

Читать далее

Запуск Adobe Flash в Chromium браузере после 12 января 2021

Время на прочтение2 мин
Количество просмотров77K

В сети все еще существует какое-то количество страниц, написанных с использованием веб-фреймворка Adobe Flex, а также языка Action Script. Для того, чтобы переписать их на современный лад, многие будут рады продолжить пользоваться инструментами разработчика (Dev Tools), как в Google Chrome.

Читать далее

Автогенерация тестов на Puppeteer встроена в Chrome DevTools

Время на прочтение3 мин
Количество просмотров21K

В Chrome 89 в DevTools добавлена экспериментальная поддержка автогенерации JS-скриптов на Puppeteer.

Схематично это работает так: вы открываете нужную страницу, в DevTools включаете запись действий, и после делаете что-то на странице обычным образом (кликаете по ссылкам и кнопкам, переходите на другие страницы, вводите текст). По мере выполнения действий браузер наполняет DevTools-вкладку с виртуальным файлом записи JS-кодом, описывающим через API Puppeteer все действия. После этого запись можно остановить, и сохранить полученный код в виде реального JS-файла.

Для демонстрации новой функциональности (названной Puppeteer Recorder) авторы подготовили небольшую демо-страницу (хотя проверять можно на любой странице, никаких предварительных условий от сайта не требуется).

Но сперва, поскольку это ещё ранняя экспериментальная функция (хотя авторы планируют развивать и расширять Puppeteer Recorder), её нужно включить в настройках DevTools, на вкладке Experiments, в виде пункта Recorder:

Читать далее

HackTheBox. Прохождение RopeTwo, часть 1. Chromium v8

Уровень сложностиСложный
Время на прочтение7 мин
Количество просмотров3.7K

Пора выложить первый райтап для машинки с площадки HackTheBox.

В данной статье разберемся с написанием RCE для патченного JavaScript-двжика v8, используемого сейчас почти повсеместно.

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

Читать далее

Самые упоротые и забавные расширения для браузера: подборка

Время на прочтение5 мин
Количество просмотров24K


Иногда разработчики “Желают странного” (С) А. Б. Стругацкие, из-за этого появляются необычные проекты, вроде запуска Doom на терминалах для считывания банковских карт и других, еще менее приспособленных для этого, девайсах. Чаще всего такое получается в результате тренировок, когда программист осваивает новую тему и реализует тестовый проект не в виде традиционного “Hello, Word!”, а чего-то более изощренного. Но ведь не все занимаются портированием древних шутеров на смарт-часы, есть и другие области разработки, более прикладные, но не менее интересные. Предположим, что человеку наскучило смотреть на длинные логи в консоли и grep’ать из них данные для отладки, хочется добавить интерактива и наглядности в свое обучение. Инструменты для этого выбираются самые разные, кто-то пользуется обычным графическим выводом, кто-то выводит данные через простенький сайт, а кто-то… пишет расширения для браузера!

В этой статье я расскажу вам о нескольких не самых практичных (хотя о практичных — тоже расскажу), но необычных расширениях. Они вряд ли войдут в подборку типа: “Топ-10 самых полезных расширений для разработчика” или пригодятся для розыгрыша коллег, но заставят озадаченно почесать затылок: “Ну и фантазия у автора!..” или просто улыбнуться.
Читать дальше →

Вклад авторов