Зазвичай під час редагування веб-сторінки ми використовуємо певний інструмент редагування, такий як Adobe Dreamweaver, CoffeeCup, Bluefish або один з інших інструментів розробки. Але що робити, якщо ми просто штурмуємо мозком або хочемо щось спробувати на сторінці в прямому ефірі? Ми можемо зробити копію сторінки в нашому інструменті на вибір і пограти з цим. Або ми могли це зробити в нашому веб-браузері. Цей підручник покаже вам, як редагувати веб-сторінку у своєму браузері.
Firefox називається Інструментом для розробників, називає функцію Inspect Element, а Chrome називає її Inspect. У будь-якому випадку, це спосіб для браузера зазирнути за блиск вашого дизайну і подивитися на код, який його веде. Ця особливість досить відома і використовується дуже багато. Що не так добре відомо, це можливість вносити зміни до цього коду на ходу.
Будь-які внесені вами зміни не будуть збережені, і це не вплине на пряму трансляцію. Якщо ви не хочете завантажувати сторінку у свій інструмент для розробників, це акуратний спосіб експериментувати.
Відредагуйте будь-яку веб-сторінку у своєму браузері
Dreamweaver та подібні інструменти мають вбудований емулятор браузера, який імітує, як виглядатиме дизайн у різних браузерах. Як вони хороші, вони не завжди точні, і ви часто запускаєте під час запуску сайту те, що те, що виглядало фантастично у вашому інструменті розробника, виглядає дещо інакше в окремому браузері.
Зазвичай ви запускаєте сайт на внутрішньому веб-сервері і тестуєте його в браузері, перш ніж запускати в реальному часі саме з цієї причини. Якщо сторінка вже опублікована або ви просто хочете щось спробувати, не потрібно копіювати та завантажувати її у свій інструмент розробки, ви можете просто скористатися Інструментом для розробників браузера.
Я використовую Firefox, тому я покажу вам, як це використовувати. Хром майже однаковий.
- Відкрийте веб-сторінку, з якою ви хочете експериментувати, у своєму браузері.
- Клацніть правою кнопкою миші будь-де на сторінці та виберіть Оглянути.
Ви маєте бачити, як ваша сторінка розділена на дві частини, а внизу з’явиться нова панель, у якій є якийсь код. Цей код є рушійною силою вибраної вами сторінки. Різні елементи сторінки доступні на вкладках у верхній частині нижньої вкладки. Наприклад, у Firefox ми бачимо інспектор, консоль, налагоджувач, редактор стилів тощо.
Якщо ви запустите курсор по рядках на нижній панелі, ви побачите різні частини виділення веб-сторінки. Рядок коду, на якому ви знаходитесь під час виділення, - це код, який впливає на цю частину сторінки.
- Якщо ви хочете пограти з тим, як виглядає сторінка, спробуйте редактор стилів.
- Якщо ви хочете пограти з тим, як працює сторінка, спробуйте консоль або доступність.
- Якщо ви хочете усунути помилки або вирішити проблему, використовуйте консоль або відладчик
Продуктивність корисна для SEO на місці, але пам'ять, мережа та зберігання використовуються не так багато.
Пам'ятайте, що ви можете возитися в Інструментах для розробників скільки завгодно, і це не вплине на сайт. Будь-які зміни вносяться лише до того, як відображається сторінка у вашому індивідуальному браузері, ви не впливаєте на сам веб-сайт. Після закриття інструменту всі зміни втрачаються.
Внесення змін до сторінки
Тепер ви знаєте, що можете змінити все, що завгодно, не впливаючи на фактичний веб-сайт, давайте трохи повеселитися. Знайдіть на сторінці елемент, який ви хочете відредагувати. Ви можете змінити шрифт, колір шрифту, фонове зображення або що завгодно. У цьому прикладі я збираюся змінити колір шрифту заголовка банера.
- Клацніть правою кнопкою миші точний елемент, який ви хочете змінити, і виберіть Оглянути.
- Виділіть рядок або "title" або "H1", щоб текст був виділений у верхній частині.
- Перейдіть на дві панелі ліворуч і знайдіть колір шрифту.
- Змініть значення на щось інше або виберіть кольорову крапку, щоб використовувати селектор.
Ваша зміна з’явиться динамічно, коли ви закінчите зміни. Ви можете змінити колір, розмір, шрифт, фон і все про шрифт. Ви не можете зберегти роботу, але ваші зміни залишаться на цьому сеансі.
Ви можете змінити все про сторінку, яка є ідеальною, якщо у вас є ідея і хочете швидко перевірити її, перш ніж запустити всі програми для розробки. Все, що вам потрібно зробити, це пам’ятати, які зміни ви внесли і де не можете їх зберегти тут. Вам потрібно буде зробити скріншот або записати зміни та повторити їх у своїх інструментах для розробників, щоб вони залишалися придатними.
Редагування веб-сторінки у веб-переглядачі - це акуратний спосіб експериментувати чи грати зі сторінками. Це також хороший спосіб дізнатися трохи про розробку веб-сторінок без необхідності купувати дорогі інструменти для розробників. Тепер ви знаєте, як, ходіть і грайте!
