Є таке поняття «Live Reload» - це автоматичне оновлення сторінки в браузері, коли змінився становить її css-файл (html, js і т.д.). На практиці це виглядає так: веб-майстер вніс зміни в css-файлі, зберіг, браузер автоматично оновив сторінку. Тобто якщо по простому, то не потрібно щоразу натискати кнопку «Оновити сторінку» в браузері.

Щоб реалізувати Live Reload для своїх завдань буде потрібно зовсім небагато.

Зайнявся цим питанням, я вирішив убити відразу кількох зайців. Проаналізувавши свою роботу, я вибудував типову послідовність дій:

• внесення змін до початкового коду
• збереження (Ctrl + S)
• перемикання на вікно браузера
• оновлення сторінки (F5)
• перемикання назад і повтор

Зазвичай я працюю з двома моніторами, тому перемикання Редактор-браузер не приховують один-одного.

Перше, що я вирішив зробити - позбавитися від постійного Ctrl + S. У Notepad ++ (найкращий редактор для веб-майстра) досить встановити плагін AutoSave. Йдемо в Модулі - Plugin Manager - Show Plugin Manager, відзначаємо AutoSave і тиснемо Install.

Якщо з якоїсь невідомої причини плагін не вдалося автоматично встановити, то можна його скачати вручну з загальної сторінки плагінів NPP.

Після перезавантаження редактора в плагін з'явиться пункт «Auto Save», де можна його налаштувати:

Головне виставити опцію «loses focus», оскільки вона буде ключовою в Live Reload.

Отже, перше завдання - позбутися від постійного Ctrl + S - виконана.

Для другої частини нам буде потрібно встановити розширення для FireFox « AutoReload ». В налаштуваннях розширення слід зазначити «Enabled». Решта опцій на свій розсуд.

Для зручності роботи, кнопку AutoReload краще винести в верхню панель браузера.

Тепер слід вказати AutoReload які файли потрібно відстежувати. Можна вказати як конкретні файли (Watch Files ...) або вказати каталог (Watch Directory ...) де знаходяться відслідковують файли.

Важливий момент - вказувати відслідковують файли потрібно на відкритій сторінці, тієї яка буде автообновляться. Тобто відкриваємо сторінку, вибираємо каталог, AutoReload автоматом знайде всі файли і тиснемо OK.

Власне, це все. Тепер робота зводиться до двох пунктів:

• правка коду
• перемикання на браузер

Якщо у вас один монітор, то іноді буде зручним одночасно бачити і сторінку і вихідний код. У Notepad ++ це питання вирішується дуже просто. Потрібно лише виставити режим «Поверх всіх вікон», що дозволить уникнути приховування вікна редактора, а пункт меню «Тільки текст (у все вікно)» залишить тільки текст, без панелей. Для зручності можна призначити цим пунктам гарячі клавіші, тоді перемикання буде миттєвим.

З мінусів AutoReload зазначу лише те, що він відстежує файли, зазначені в момент додавання. Якщо з'явився новий файл, то він його вже не бачить. Вирішується це досить просто - додаємо файли ще раз.

В цілому зазначу, що метод годиться для самих різних завдань вебмастера. Я його відтестувати на CSS / JS / HTML / PHP файлах - працює без проблем. :-)