п’ятниця , Серпень 18 2017

Головні новини
Ви тут: Головна / Цікаве / 7 Нових Функцій Google Chrome

7 Нових Функцій Google Chrome



Крім того, що Google Chrome є прекрасним браузером для щоденного користування, його так само можна використовувати при розробці. У цій статті розглянемо новинки інструменту DevTools. Зустрічайте сімку новітніх функцій Google Chrome, про які ви не знали.

Початок роботи з Chrome DevTools Experiment

В Chrome є кілька чудових експериментальних функцій, які за умовчанням приховані або відключені. Щоб активувати їх перейдіть в секцію chrome://flags/#enable-devtools-experiments через адресний рядок, активуйте DevTools Experiment і перезапустіть Chrome.

Після перезавантаження, запустіть DevTools і натисніть на символ шестерінки (настройки) у верхній правій частині панелі. У вікні, ви повинні побачити вкладку “Experiment”. Вибираємо всі пункти.

activate_devtools_experimants

1. Покращений емулятор для мобільних пристроїв

Сьогодні кожен сайт повинен бути оптимізований для роботи з мобільними пристроями, так само я у громадянина України повинна бути довідка про відсутність судимості. У Google Chrome у нас є можливість налагодження в режимі відображення мобільних пристроїв через Mobile Device Emulator, який був повністю оновлений і напханий новими можливостями.

mobile_emulation_on_canary

Щоб активувати Mobile Device Emulator запустите DevTools і натисніть на іконку смартфона поруч з символом loop/search (іконки пошуку), як показано на скріншоті.

2. Одночасна правка декількох рядків

Ви хочете редагувати безліч рядків одночасно, як в Sublime Text? Тепер Chrome теж підтримує дану фішку. Натисніть Ctrl + Click для того, щоб отримати можливість правки декількох рядків.

multi_selection

 

3. Регулювання швидкості завантаження мережі

Тепер у нас є можливість регулювання швидкості завантаження сторінки. Перебуваючи в DevTools натисніть клавішу Esc , щоб внизу активировалась додаткова панель. В вкладці Network виберіть тип швидкості для регулювання мережевий зв’язку і подивіться, як ваш веб-сайт справляється в режимі обраної швидкості.

throttling

4. Офлайн-режим

Google Chrome тепер може працювати в офлайн режимі, який дозволяє вам відкривати веб-сайти, в той час як ви фактично перебуваєте поза мережею. Якщо ви розробляєте веб-додаток, який має працювати навіть, в той час як користувачі знаходяться поза мережею, ця фішка може вам стати в нагоді. Щоб запустити офлайн-режим перейдіть за адресою chrome://flags/#enable-offline-mode і виберіть опцію “Включити Offline Cache”.

enable_offline_cache_mode

Не забудьте перезапустити Chrome, щоб налаштування вступили в силу.

5. Перетягування коду в HTML редактор

Іноді нам необхідно скопіювати HTML код з браузера в наш редактор. Замість копіювання / вставки, тепер, ви можете просто перетягти потрібний DOM-фрагмент.

drag_element_to_editor

На даний момент можна перетягнути лише один елемент, без його внутрішніх елементів.

6. Перевірка CSS

Тепер ви можете здійснювати перевірку свого CSS, обчислювати фрагменти, які не використовуються на сторінці.Щоб зробити це, перейдіть у вкладку “Audits” і натисніть “Run“. Ви побачите список селекторів, які не використовуються на поточній сторінці.

auditing_css

7. Додавання SourceMap

Хороша новина для тих, хто пише CSS/JS, використовуючи процесори, такими як SASS, LESS, або CoffeeScrip. Тепер у вас є можливість додавання SourceMap файлів.

Переконайтеся, що ви перебуваєте у вкладці Sources. Після цього клацніть правою кнопкою миші, і виберіть пункт Add source map щоб додати файл.

add_source_map_1

Дякую за увагу.



Автор Володимир Гривінський



3 коментарі

  1. А мені навпаки подобається Хром, іноді він навіть більш функціональний, аніж інші браузери, тому такі штуки як ви нам тут відкрили роблять його для мене ще крутішим! Вдячний!

  2. Ненавиджу працювати в Хромі, він тугий і може набагато менше, аніж Мозіла, для прикладу. Там важко працювати, але варто спробувати цю вашу знахідку, де знайшли таку новину, до речі?

Залишити коментар

Ваша електронна адреса не буде опублікована.

Вгору
UA TOP Bloggers