Developer Tools - поради та рекомендації

2 хв. читання
12 листопада 2021

Як розробники веб-сторінок, ми витрачаємо багато часу, використовуючи браузер для перевірки HTML, CSS та Javascript файлів. Для того, щоб спростити цей процес, сучасні браузери мають інструменти розробки.

Загальні поради

Пошук усіх файлів які використовуються на сторінці

При перегляді файлів у source panel, Ви можете отримаєте глобальний пошук по всім файлам, які використовуються на сторінці, натиснувши на Esc і вибравши вкладку "search" на спливаючій панелі.
search1.png

Історія версій

Якщо Ви натиснете правою кнопкою миші на файл з яким працюєте та виберете "local modifications", то побачите всю історію змін.

history.png

Зберігання Javascript змінних

Якщо натиснути правою кнопкою миші на змінну під час налагодження Javascript, Ви отримаєте опцію "Set as global". Це дозволяє зберегти значення для його подальшої перевірки.

global_variables.png

Colour picker

Кожне значення кольору у стилях має зразок фактичного кольору. Якщо Ви натиснете на зразок, то отримаєте спливаюче вікно для вибору кольору. Якщо перевести курсор на сторінку, то Ви отримаєте палітру кольорів для вибору кольору зі сторінки.

colour_picker.png

Збереження змін до файлу

Один з найпоширеніших робочих процесів, який ми використовуємо - зміна сторінок у браузері. Саме цей процес дозволяє нам тестувати дизайн та змінювати код прямо на лайв-сторінці. Одне з найбільших розчарувань з яким ми зустрічались, це те, що не було простого способу зберегти зміни. Декілька останніх доповнень до інструментів, додали засіб для цього. Тепер будь-який файл який Ви змінюєте, можна зберегти, натиснувши правою кнопкою миші на файлі та вибравши "Save as".

save_as.png

Workspaces

Workspaces забезпечує більш комплексне рішення для роботи з файлами.
Використовуючи цей інструмент, Ви можете додати каталог на вашому комп'ютері, для тих файлів які додані за допомогою developer tools(показано на правій панелі у вкладці "sources"). Після цього Ви можете відобразити файли у Вашій папці замість тих, що використовуються на Вашій сторінці, це дозволяє зберігати всі потрібні зміни і з легкістю повертатись назад за потреби.

workspaces.png

Responsive design

Responsive design, аналогічний тому, який є у Firefox, дозволяє моделювати дизайн для найпопулярніших пристроїв. Звісно це не теж саме, що переглядати на реальному пристрої, але така можливість дуже корисна для тестування:

  • Вибір розмірів екранів для найбільш поширених пристроїв;
  • Симуляція дотику;
  • Симуляція пікселів девайсу та зуму;
  • Агент для spoofing користувачів;
  • Імітація різних швидкостей мережі;

responsive_design_view.png

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.3K
Приєднався: 7 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація