Как стать автором
Обновить
13.49
Рейтинг

Google Chrome

Браузер от Gooogle

Сначала показывать
  • Новые
  • Лучшие
Порог рейтинга
  • Все
  • ≥0
  • ≥10
  • ≥25
  • ≥50
  • ≥100

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

JavaScript *Google Chrome Читальный зал Софт


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

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

Данная статья, прежде всего, обращена к тем, кто еще находится в самом начале своего пути к программистскому Олимпу. Поэтому, если вы матерый разработчик, вас вряд ли заинтересует дальнейшее повествование. Хотя, вы можете поделиться своим богатым жизненным опытом в комментариях к публикации.
Читать дальше →
Всего голосов 31: ↑29 и ↓2 +27
Просмотры 34K
Комментарии 4

Новости

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

JavaScript *Google Chrome HTML *Расширения для браузеров

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

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

Читать далее
Всего голосов 4: ↑2 и ↓2 0
Просмотры 1.6K
Комментарии 1

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

Firefox CSS *Google Chrome
imageРечь пойдёт о юзер-стилях, помогающих программистам не отвлекаться на Дзен и не закрывать часть окна браузера поисковой строкой Яндекса.

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

Появление Дзена и самозапускающихся видео изрядно мешает программисту или любому исследователю, который пришёл на сайт за запросом, а тут — картинки и видео начинают показывать своё и отбирают с таким трудом достигнутое сосредоточение на работе ) или просто время.
Читать дальше →
Всего голосов 7: ↑1 и ↓6 -5
Просмотры 19K
Комментарии 23

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

Разработка веб-сайтов *Google Chrome Расширения для браузеров Браузеры
Перевод

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

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

Читать далее
Всего голосов 53: ↑51 и ↓2 +49
Просмотры 52K
Комментарии 128

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

Блог компании Selectel Google Chrome Облачные сервисы Софт IT-компании

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

В честь памятной даты Google представила новые функции, о которых поговорим под катом.
Читать дальше →
Всего голосов 29: ↑29 и ↓0 +29
Просмотры 8K
Комментарии 11

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

Блог компании Яндекс.Практикум Занимательные задачки JavaScript *Google Chrome Браузеры
Привет, Хабр!

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

Возьмём по умолчанию 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"); });

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

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

Информационная безопасность *JavaScript *Google Chrome Браузеры
Из песочницы

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

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

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

Читать далее
Всего голосов 14: ↑13 и ↓1 +12
Просмотры 7.5K
Комментарии 12

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

Блог компании Reksoft Разработка веб-сайтов *JavaScript *Google Chrome Тестирование веб-сервисов *

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

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

Читать
Всего голосов 5: ↑4 и ↓1 +3
Просмотры 2.9K
Комментарии 3

Режим инкогнито от Google и других браузеров: красивая игра слов и немножко обмана

Информационная безопасность *Google Chrome Браузеры
Recovery mode
Да, друзья! Я утверждаю, что «корпорация добра», как ее когда-то называли, и их коллеги по браузерному цеху умышленно извратили или перекрутили слово «инкогнито», попутно «загадив» весь топ по этому и сопредельным запросам. Они живут за счет данных, им анонимность просто не нужна. Но по порядку.
Читать дальше →
Всего голосов 46: ↑13 и ↓33 -20
Просмотры 36K
Комментарии 48

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

Блог компании SkillFactory Разработка веб-сайтов *Google Chrome Серверная оптимизация *
Перевод
Tutorial

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




Не важно, насколько хорош ваш сайт; если его загрузка занимает слишком много времени, никто не будет ждать, чтобы его увидеть. Если ваш сайт загружается более 3 секунд, есть большая вероятность, что вы потеряете часть посетителей. Но знаете ли вы, что можно значительно улучшить время загрузки своего веб-приложения, используя прогрессивный рендеринг? Прогрессивный рендеринг не только увеличивает скорость загрузки, но и решает некоторые серьёзные проблемы в методах рендеринга на стороне клиента и на стороне сервера. Чтобы лучше понять прогрессивный рендеринг, давайте посмотрим, как работает рендеринг на стороне клиента и на стороне сервера.
Приятного чтения!
Всего голосов 10: ↑8 и ↓2 +6
Просмотры 7.6K
Комментарии 1

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

Firefox Разработка веб-сайтов *Open source *Google Chrome Браузеры
Перевод

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

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

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

Читать далее
Всего голосов 210: ↑200 и ↓10 +190
Просмотры 70K
Комментарии 693

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

Google Chrome HTML *Браузеры
Перевод

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

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

Читать далее
Всего голосов 21: ↑12 и ↓9 +3
Просмотры 21K
Комментарии 17

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

Google Chrome Adobe Flash
Из песочницы

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

Читать далее
Всего голосов 10: ↑9 и ↓1 +8
Просмотры 43K
Комментарии 15

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

JavaScript *Google Chrome Тестирование веб-сервисов *
Из песочницы

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

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

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

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

Читать далее
Всего голосов 17: ↑17 и ↓0 +17
Просмотры 8.7K
Комментарии 5

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

Информационная безопасность *JavaScript *Google Chrome CTF *
✏️ Технотекст 2021
Tutorial

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

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

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

Читать далее
Всего голосов 11: ↑11 и ↓0 +11
Просмотры 2.8K
Комментарии 1

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

Блог компании RUVDS.com Firefox Google Chrome Расширения для браузеров Браузеры


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

В этой статье я расскажу вам о нескольких не самых практичных (хотя о практичных — тоже расскажу), но необычных расширениях. Они вряд ли войдут в подборку типа: “Топ-10 самых полезных расширений для разработчика” или пригодятся для розыгрыша коллег, но заставят озадаченно почесать затылок: “Ну и фантазия у автора!..” или просто улыбнуться.
Читать дальше →
Всего голосов 49: ↑44 и ↓5 +39
Просмотры 20K
Комментарии 11

Пугающие эксперименты с PDF: запускаем «Арканоид» в документе

Блог компании VDSina.ru Ненормальное программирование *JavaScript *Google Chrome PDF
Перевод

Подробнее об этом хаке и особенностях его работы можно узнать из доклада на !!con 2020 «Playing Breakout… inside a PDF!!»

Если вы его не смотрели, то попробуйте открыть файл breakout.pdf в Chrome.

Как и многие из вас, я всегда считал PDF довольно безопасным форматом: автор создаёт текст и графику, после чего он открывается в программе просмотра PDF, больше ничего не делая. Несколько лет назад я мимоходом слышал об уязвимостях Adobe Reader, но особо не задумывался о том, как они могут возникать.

Изначально Adobe сделала PDF именно для этого, но мы уже выяснили, что сегодня это совсем не так. В 1310-страничной спецификации PDF (на самом деле довольно понятном и интересном чтиве) описывается безумное количество возможностей, в том числе:


но самое интересное для нас…

Читать дальше →
Всего голосов 56: ↑55 и ↓1 +54
Просмотры 11K
Комментарии 8

Простые правила IT-гигиены

Информационная безопасность *Google Chrome Браузеры Софт
Доброго времени суток.

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

image

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

Давайте приступим.

Нюансы проблематики


Наверняка каждый так или иначе сталкивался с моментом, когда с аккаунта знакомого вдруг начинает поступить какой-то левый спам, просьбы занять денежку и что-то еще такое-этакое.
Читать дальше →
Всего голосов 37: ↑23 и ↓14 +9
Просмотры 23K
Комментарии 89

Обходим проверку сертификата SSL

Разработка веб-сайтов *Google Chrome Браузеры Тестирование веб-сервисов *

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

Читать дальше →
Всего голосов 29: ↑20 и ↓9 +11
Просмотры 43K
Комментарии 23

5 accessibility инструментов в Chrome DevTools

Google Chrome Accessibility *

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

Читать далее
Всего голосов 4: ↑4 и ↓0 +4
Просмотры 5.6K
Комментарии 0

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