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

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

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

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

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

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

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

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

Colour picker

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

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

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

Workspaces

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

Responsive design

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

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