Інструменти розробника Chrome: що таке підтримка фрагментів?

76

Починаючи з версії 19, веб-інспектор Chrome має експериментальну функцію, яка називається "підтримка фрагментів". Ось як його активувати:

Відкрийте chrome: прапори, увімкніть "Експерименти інструментів розробника", перезапустіть.
Відкрийте Web Inspector (Інструменти розробника), натисніть значок шестірні налаштувань у нижньому правому куті, увімкніть «Підтримка фрагментів», перезапустіть.
Відкрийте панель "Сценарії", клацніть піктограму "дерево навігатора" зліва та знайдіть порожню вкладку "Фрагменти".

Моє запитання: для чого я можу це використовувати? Як я можу заповнити це фрагментами?

javascript google-chrome-devtools web-inspector

— Джо Лісс
джерело

4

Зараз є надзвичайно повні документи щодо фрагментів: developers.google.com/chrome-developer-tools/docs/… Насолоджуйтесь

— Пол Ірланд

@PaulIrish Сторінка посилання більше не містить фрагментів фрагментів.

— amigo

85

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

developers.google.com/chrome-developer-tools/docs/authoring-development-workflow#snippets

Деякі з варіантів використання фрагментів можуть допомогти:

Закладки - усі ваші закладки можна зберігати як фрагменти, особливо ті, які ви можете редагувати.

Службові програми - помічники налагодження для взаємодії з поточною сторінкою можна зберігати та налагоджувати. Доступний список таких комунальних служб, підготовлений громадою.

Налагодження - фрагменти пропонують багаторядкову консоль із підсвічуванням синтаксису та стійкістю, що робить його зручним для налагодження коду, який є більше, ніж однорядковий.

Код виправлення мавп - код, який ви хочете виправити під час виконання, можна зробити за допомогою фрагментів, хоча багато разів ви можете просто редагувати код у реальному часі на вкладці Джерела.

Нарешті, я особисто збирав кілька загальних фрагментів, які ви можете включити у свій арсенал: github.com/paulirish/devtools-addons/wiki/Snippets

Щоб швидко запускати фрагменти, тепер ви можете це зробити. Ctrl-Shift-P для "палітри команд", потім зворотний простір і використовуйте! префікс, а потім введіть будь-яку назву фрагмента, яку потрібно запустити.

— Пол Ірландський
джерело

3

Який найшвидший спосіб виконати фрагмент? Я міг натиснути Ctrl + Shift + I (відкрити DevTools), Ctrl + P (нечіткий пошук), почати вводити ім'я фрагмента, ENTER (відкритий фрагмент), Ctrl + ENTER (виконувати фрагмент). Сподіваюся, я чогось пропустив і є швидший шлях. Було б непогано "панель інструментів фрагментів" у браузері.

— Šime Vidas

@ ŠimeVidas, це найшвидший спосіб, який я знаю. Який фрагмент ви використовуєте так часто, що хочете для швидкого набору?

— Paul Irish

Мені потрібно це , щоб подивитися на YouTube: javascript:(function(){location.href=location.href.replace('youtube.com/watch','youtube.com/watch_popup')}()). (Я не потребую Flash, і YouTube завантажує для мене лише відео HTML5 на своїй сторінці "watch_popup". Дивіться тут: twitter.com/simevidas/status/368054720327204864 ). Також jsgif для перегляду анімованих GIF-файлів. Я зачепив цих двох, тому постійно тримаю панель інструментів закладок відкритою.

— Šime Vidas

6

Цікаво, чи Пол Ірландський ніколи не відповідав на питання, а НЕ був позначений як правильна відповідь ....

— Стів

2

@PaulIrish Або Ctrl-P, щоб поле було порожнім і не потрібно було видаляти >. Дякуємо за підказку!

— Шіме Відас,

12

Я запитав Пола Ірландського, чи знає він що-небудь про це, він теж не був впевнений, але каже, що це ще не повністю реалізовано, і показав мені на відстежувач помилок, я знайшов головний квиток і, переглядаючи деякі коди, у яких різниць багато FIXME: To be implemented.коментарі.

— JaredMcAteer
джерело

7

Це майже зроблено. Це дозволяє ефективно використовувати багаторядкову консоль, але із збереженим / іменованим входом.

— Пол Ірланд

Я зрозумів, що дуже радий цій функції.

— JaredMcAteer

Краща відповідь від vidar, кілька відповідей нижче

— android.nick

Інтерфейс користувача на даний момент сирий. У Windows ви можете зберігати фрагменти лише за допомогою Ctrl + S (лише переконайтеся, що фокус знаходиться на правому вікні). Здається, немає ярлика для запуску фрагмента.

— Стефан

Chrome зберігає ваші фрагменти в localstorage, тому я не думаю, що ви можете легко редагувати їх зовні. Найкраще зробити зовнішнє редагування та скопіювати у devtools.

— JaredMcAteer

9

Клацніть правою кнопкою миші, щоб створити новий.

Фрагменти Chrome DevTools - Нове

— NVI
джерело

5

Підтримка фрагментів інструментів розробника Chrome дозволяє створювати / редагувати / зберігати та виконувати фрагменти коду JavaScript.

— всевик
джерело

3

Ця функція зараз працює над останніми збірками chrome, але користувальницький інтерфейс ще не дуже приємний. Фрагментами можна керувати за допомогою контекстного меню навігатора.

— vsevik

3

Я не можу активувати цей експеримент сам ( Developer Tools experimentsу моєму немає chrome:flags, але в Safari я знайшов таке пояснення:

Коротше кажучи, це "невелика утиліта, яка дозволяє вводити блоки HTML і CSS і надавати їх на льоту".

З публікації в блозі здається, що в Safari є помилка, тому, можливо, Chrome ще не реалізував її.

— Відар С. Рамдал
джерело

Підтримка фрагментів інструментів розробника Chrome - це зовсім інша функція.

— vsevik

3

Ви можете знайти список корисних фрагментів тут http://bgrins.github.io/devtools-snippets/

одним з корисних фрагментів є 'jquerify.js' - за допомогою цього ви можете включити jQuery на будь-яку сторінку, якщо вона ще не включена.

— NavaRajan
джерело