Your Company
Вкусный портал

Что нового в DevTools (Chrome 65)

  1. местный заменяет
  2. ограничения
  3. Вкладка «Модификации»
  4. Новые инструменты доступности
  5. Панель доступности
  6. Коэффициент контрастности в палитре цветов
  7. Связанные функции
  8. Новые ревизии
  9. Новые SEO аудиты
  10. Другие обновления
  11. в коде, который передает сообщения между потоками
  12. асинхронный код
  13. Несколько записей на панели «Производительность»
  14. Запрос от команды DevTools: рассмотрим Canary
  15. Предыдущие заметки о выпуске

Новые функции DevTools в Chrome 65 включают в себя:   Узнайте больше или посмотрите видео-версию этих заметок о выпуске ниже

Новые функции DevTools в Chrome 65 включают в себя:

Узнайте больше или посмотрите видео-версию этих заметок о выпуске ниже.

местный заменяет

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

Рисунок 1Рисунок 1

Сохранение изменений CSS при загрузке страницы с помощью локальных переопределений

Как это работает?

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

Чтобы настроить локальные переопределения :

  1. Откройте панель « Источники» . 1. Откройте вкладку « Замены ».

    Рисунок 2  Вкладка « Переопределения » Рисунок 2 Вкладка « Переопределения »

  2. Нажмите Настройка переопределений . 1. Выберите каталог, в который вы хотите сохранить изменения. 1. В верхней части окна нажмите Разрешить, чтобы предоставить DevTools права на чтение и запись в каталог. 1. Внесите свои изменения.

ограничения

  • DevTools не сохраняет изменения, сделанные в дереве DOM панели « Элементы» . Вместо этого измените HTML-код на панели « Источники» .
  • Если вы измените CSS на панели « Стили», а источником этого CSS является файл HTML, DevTools не сохранит изменения. Вместо этого измените файл HTML на панели « Источники» .

Связанные функции

  • Workspaces , DevTools автоматически сопоставляет сетевые ресурсы с локальным хранилищем. Всякий раз, когда вы вносите изменения в DevTools, это изменение также сохраняется в вашем локальном хранилище.

Вкладка «Модификации»

Следите за изменениями, которые вы вносите локально в DevTools, через новую вкладку « Изменения ».

Рисунок 3Рисунок 3

Вкладка « Изменения »

Новые инструменты доступности

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

Панель доступности

Используйте панель « Специальные возможности» на панели « Элементы», чтобы просмотреть свойства специальных возможностей выбранного в данный момент элемента.

Рисунок 4Рисунок 4

На панели « Специальные возможности» отображаются атрибуты ARIA и вычисленные свойства для элемента, который в данный момент выбран в дереве DOM на панели « Элементы» , и их положение в дереве специальных возможностей.

См. Ярлык Роба Додсона A11ycast на ярлыке ниже, чтобы увидеть панель « Доступность в действии».

Коэффициент контрастности в палитре цветов

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

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

Рисунок 5

Проверка коэффициента контрастности выделенного элемента h1

На рисунке 5 два флажка рядом с 4.61 означают, что этот элемент соответствует улучшенный рекомендуемый коэффициент контрастности (AAA) , Если бы был только один тик, это означало бы, что он встретил минимальный рекомендуемый коэффициент контрастности (AA) ,

Нажмите на Показать больше ! Показать больше разработать раздел « Коэффициент контрастности ». Белая линия в поле « Цветовой спектр» представляет собой границу между цветами, которые соответствуют рекомендуемой контрастности, и теми, которые не соответствуют. Например, поскольку серый цвет на рисунке 6 ** соответствует рекомендациям. Это означает, что все цвета ниже белой линии также соответствуют рекомендациям.

Рисунок 6Рисунок 6

Расширенный раздел Contrast Ratio

Связанные функции

Панель Аудит имеет автоматический аудит доступности, чтобы гарантировать, что * каждый * текстовый элемент на странице имеет достаточный коэффициент контрастности.

вид Run Lighthouse в Chrome DevTools или посмотрите A11ycast ниже, чтобы узнать, как использовать панель Audits для проверки доступности.

Новые ревизии

Chrome 65 поставляется с новой категорией аудитов SEO и множеством новых аудитов эффективности.

Новые SEO аудиты

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

Рисунок 7Рисунок 7

Новая SEO категория аудитов

Chrome 65 также поставляется с множеством новых проверок производительности:

  • Время запуска JavaScript велико
  • Использует неэффективную политику кэширования статических активов.
  • Избегайте рефералов страниц
  • Документ использует плагины
  • Минимизировать CSS
  • Сократить JavaScript

Другие обновления

Надежный пошаговый код с операторами и асинхронным кодом

Chrome 65 приносит обновления Step Into ! Шаг в кнопка Шаг в при применении кода, который передает сообщения между потоками и асинхронным кодом. Если вы хотите поведение предыдущего шага, вы можете использовать новый шаг ! шаг вместо.

в коде, который передает сообщения между потоками

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

Например, приложение на рисунке 8 ** отправляет сообщение между основным проводом и рабочим проводом. После вмешательства в вызов postMessage () в основном потоке DevTools останавливается в обработчике onmessage рабочего потока. Обработчик onmessage сам отправляет сообщение в основной поток. Ввод * этого * вызова приостанавливает DevTools в главном потоке.

Рисунок 8

Шаг в коде передачи сообщений в Chrome 65

Когда вы вводили код, подобный этому, в предыдущих версиях Chrome, Chrome показывал вам только сторону основного потока кода, как вы можете видеть на рисунке 9 .

Рисунок 9

Шаг в коде передачи сообщений в Chrome 63

асинхронный код

Когда вы вводите асинхронный код, DevTools теперь предполагает, что вы хотите приостановить работающий асинхронный код.

Например, на рисунке 10 после установки setTimeout () в setTimeout () DevTools выполняет весь код, ведущий к фону, а затем приостанавливает функцию, переданную setTimeout ().

Рисунок 10

Шаг в асинхронный код в Chrome 65

Когда вы ввели код, подобный этому, в Chrome 63, DevTools прекратил читать код в хронологическом порядке, как вы можете видеть на рисунке 11 .

Рисунок 11

Шаг в асинхронный код в Chrome 63

Несколько записей на панели «Производительность»

Панель « Производительность» теперь позволяет временно сохранять до 5 записей. Записи удаляются при закрытии окна DevTools. вид Начните с анализа производительности во время выполнения ознакомиться с панелью Performance .

Рисунок 12Рисунок 12

Выбор между несколькими записями на панели Performance

Бонус ##: автоматизировать действия DevTools с помощью Puppeteer 1.0 {: #puppeteer}

Теперь доступна версия 1.0 Puppeteer, средства автоматизации навигации, которым управляет команда Chrome DevTools. Вы можете использовать Puppeteer для автоматизации многих задач, ранее доступных только через DevTools, например, снимки экрана:

const puppeteer = require ('кукловод)'; (async () => {const browser = await puppeteer.launch (); const page = await browser.newPage (); await page.goto ('https://example.com'); await page.screenshot ({путь : 'example.png'}); await browser.close ();}) ();

Он также имеет API для многих полезных задач автоматизации, таких как создание PDF:

const puppeteer = require ('кукловод)'; (async () => {const browser = await puppeteer.launch (); const page = await browser.newPage (); wait page.goto ('https://news.ycombinator.com', {waitUntil: 'networkidle2' }); ожидайте page.pdf ({путь: 'hn.pdf', формат: 'A4'}); ожидайте browser.close ();}) ();

вид Быстрый старт чтобы узнать больше.

Вы также можете использовать Puppeteer для предоставления функциональности DevTools во время просмотра без явного открытия DevTools. вид Использование возможностей DevTools без открытия DevTools для примера.

Запрос от команды DevTools: рассмотрим Canary

Если вы используете компьютер Mac или Windows, рассмотрите возможность использования Chrome Canary в качестве браузера по умолчанию для разработки. Если вы сообщаете об ошибке или изменениях, которые вам не нравятся, пока они находятся на Канарских островах, команда DevTools может обработать ваши комментарии намного быстрее.

Лучшее место для обсуждения функций или модификаций, которые вы здесь видите, это Список рассылки [email protected] , Вы также можете нас @ChromeDevTools если вы пропустите время. Если вы уверены, что столкнулись с ошибкой в ​​DevTools, пожалуйста, открыть вопрос ,

Предыдущие заметки о выпуске

Смотрите тег DevTools-WhatsNew ссылки на все предыдущие заметки о выпуске DevTools.

Новости

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

Alcazar - официальный сайт концертного агента. Заказать выступление группу Alcazar на праздник, свадьбу, корпоратив в ProConcert.
Добро пожаловать на страницу шведской музыкальной группы. Группа «Alcazar»  - это шикарная творческая идея продюсера Александра Барда. В 1998 году музыкант решил создать новый интересный проект,

Организация и проведение корпоративных мероприятий и праздников в СПБ – event-агентство REMAR Group
Корпоративные праздники – это важный элемент налаживания взаимоотношений между сотрудниками фирмы, представителями различных отделений компании. Проведение подобных мероприятий подразумевает легкую, приятную,

Проведение юбилея - проведение юбилея 40-45 лет | Организация праздников и корпоративных мероприятий от «ClubTrade»
Близится очередная круглая дата? Предлагаем Вам отметить юбилей с нашей помощью. Специалисты « Clubtrade » подберут ведущего для Вашего праздника – интеллигентного мужчину или интересную даму в возрасте

Что надеть на новогодний корпоратив 2018


Саксофонист на свадьбу и праздник в Москве! Заказать саксофониста!
Сделать свадьбу или праздник романтичным, чувственным и совершенным Вам поможет красивое звучание саксофона. Саксофонист на встречу гостей или росписи, банкета — это одно из тех изысканных, музыкальных

Автобус для корпоративов
Не всегда корпоративные мероприятия и празднования проходят в городской местности. Иногда – по большей части все-таки, летом – выезд на природу более предпочтительный, особенно, если у руководства имеется

Добро пожаловать в питерский Форт Боярд!
Помните программу Форт Боярд, которую 15 лет тому назад с нетерпением ждала большая часть телезрителей РФ? Сегодня ее трудно назвать особенно популярной, но соревнования, проводимые среди участников, не

Аренда кальяна на дом
Ваш отдых - наша работа!   О нас      Здравствуйте дорогие друзья! Организация ООО «Есть Кальян» Екатеринбург рады предложить вам следующие виды услуг относительно вашего отдыха. Отличным дополнением

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

Реклама

Календарь

Реклама

Copyright © 2016 www.j-operamini.b5bedf3d7