Редактор кода html от google

Live Editing HTML and CSS with Chrome DevTools

Chrome DevTools is a powerful suite of web development tools built right into the Chrome browser. One of the most useful features of DevTools for web developers is the ability to live edit the HTML and CSS on a page. This functionality allows any developer, even those with weaker HTML and CSS knowledge, to quickly prototype and iterate on potential changes to a web page.

While working on Lucidchart, one of my recent projects was to add some check marks into the inputs where users fill in their billing information in order to convey immediate feedback when the users entered properly formatted and valid information. Even though I am more comfortable working in our backend code than I am with CSS and HTML, I was able to easily implement these check marks with the power of live editing.

Editing HTML using the inspector tool

There are two quick ways to open the inspector. First is to open DevTools with F12, select the “Elements” tab, and click the cursor icon in the top left. The second, faster way is to use the keyboard shortcut Ctrl+Shift+C. If you work regularly in a Linux environment, there’s a good chance you’ve used this shortcut on accident many times when you meant to copy text!

Once the inspector is active, you can locate the HTML of any element on the page by clicking on it. Chrome will also show you positioning and sizing information of elements as you hover over them.

Once an element is selected, you can interact with it in all kinds of ways. By right-clicking on the HTML in the “Elements” tab and selecting “Edit as HTML,” you can make live edits to the markup of a webpage that Chrome will immediately render once you’re done editing.

Telling DevTools that you are done editing can be tricky. Your first instinct may be to hit the Escape key, but this will back you out of editing while discarding your changes. You can ensure your changes save by hitting Ctrl+Enter or simply clicking outside of the text box you are editing.

HTML edits can be undone or redone using the normal Ctrl+Z and Ctrl+Y hotkeys. They will also be lost upon page refresh unless you enable persistent editing.

To start my checkmark project, I began by creating a prototype element as a place to test the tweaks I wanted to make. Using Chrome DevTools’ live edit functionality, I added a placeholder div containing only the letter “X” as my temporary makeshift checkmark.

Obviously, this is a very poor excuse for a check mark, but it’s enough to help me quickly identify some issues up front. For one thing, the check mark is in completely the wrong spot. Additionally, it messed up the alignment of the other elements on the page. Both of these issues can be resolved with some CSS. Luckily, Chrome also provides some great tools for quickly prototyping CSS changes using DevTools.

Editing CSS from the “Elements” Tab

To the right of the HTML view in the “Elements” tab, there is a view showing a breakdown of what CSS rules apply to the selected element. This view can be extremely helpful for debugging a plethora of CSS bugs. For example, because you can see what rules apply to the current element, you can identify if an element is getting CSS rules that you didn’t expect or is missing CSS rules you thought applied to it. The CSS view also shows when a style applied by a matching rule is being overridden by a more specific rule.

The CSS view provides some very helpful live editing functionality. Every style has a check box next to it, letting you enable or disable certain styles and see how they affect the elements on the page. You can also apply new styles to a specific element, an existing CSS rule, or a brand new CSS rule. All of these changes are reflected immediately on the page.

Chrome DevTools provide some convenient functionality to make live editing CSS easier to do. The most helpful for those less familiar with CSS is autocomplete. As you type in the name of your style, Chrome will suggest likely matches. Once you enter the name of the style, Chrome will also help you use the correct value for that style. For enumerated styles, like “position” or “display,” Chrome will show the legal values for you to choose from. For numerical inputs, you can use the up and down arrows to increment the value by 1 without having to re-type the units.

As with live editing HTML, you can undo or redo your live CSS changes with Ctrl+Z and Ctrl+Y.

Using DevTools, I was able to very easily figure out a combination of CSS rules that aligned my pseudo-checkbox where I wanted it. The process involved a bit of trial and error, but live edit made the iteration cycle very short, which was particularly helpful for a CSS novice like me.

Conclusion

We’ve only scratched the surface of what Chrome DevTools’ live edit functionality is capable of, especially in the CSS domain. These basic tips are always invaluable for me when I go to debug a CSS issue or quickly prototype a new CSS change.

Источник

Как редактировать html файл в Chrome

Типичный процесс веб-разработки включает в себя создание HTML-страниц со связанным CSS и JavaScript. Он включает в себя следующие этапы:

1. Открытие созданной страницы в браузере.
2. Поиск проблем с дизайном и функционалом с помощью инструментов разработчика.
3. Изменение HTML, CSS и JavaScript.
4. Копирование измененного в редактор и повтор первого шага.

Но можно открывать и редактировать файлы непосредственно в Google Chrome, а внесенные изменения сохранять локально и обновлять в редакторе. Для этого

Шаг 1: Откройте инструменты разработчика

Откройте создаваемую веб-страницу в Google Chrome. Затем перейдите в « Инструменты разработчика» на вкладку Sources .

Здесь можно открывать и редактировать файлы HTML, CSS и JavaScript. Но любые внесенные изменения будут потеряны, когда вы обновите страницу.

Шаг 2. Свяжите папку с рабочей областью

Перейдите на вкладку Filesystem, затем нажмите + Add folder to workspace . После этого укажите рабочую папку и подтвердите, что разрешаете браузеру доступ к ней.

Шаг 3: Отредактируйте и сохраните исходный код

Отредактируйте исходный код веб-страницы. Не сохраненные изменения помечаются звездочкой прямо на вкладке файла.

Изменения CSS мгновенно обновляются. Для сохранения HTML и JavaScript, нужно нажать Ctrl +S, а затем обновить окно браузера.

Вы также можете кликнуть правой кнопкой мыши по вкладке нужного файла и выбрать в контекстном меню пункт Save as , чтобы сохранить копию файла в другом месте.

Шаг 4. Просмотр и отмена изменений

Чтобы просмотреть изменения, кликните правой кнопкой мыши по вкладке файла и выберите из контекстного меню пункт Local modifications.

Значок стрелки в левом нижнем углу панели отменяет все внесенные изменения и возвращает файл к исходному состоянию.

Инструменты разработчика Google Chrome не станут полноценной заменой редактора кода. Но они могут оказаться полезны при работаете на другом ПК, где ваш редактор не установлен.

Вадим Дворников автор-переводчик статьи « How to Edit Source Files Directly in Chrome »

Пожалуйста, оставьте свои мнения по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, отклики, лайки, дизлайки, подписки!

Источник

Google Web Designer – мощный бесплатный инструмент для создания интерактивных страниц HTML5

Всем известно, что компания Google активно способствует полному замещению технологии Flash на HTML5. И нужно признать, что она действует не только запретительными мерами, но и заботится о разработчиках. Так в 2013 году компания выпустила бесплатный инструмент для дизайнеров и программистов Google Web Designer, с помощью которого можно создавать баннеры и целые интерактивные страницы HTML5. Об этом мощном инструменте и пойдёт речь в статье.

Первая версия программы появилась в 2013 году. Несмотря на то, что прошло достаточно много времени, и вышло много версий программы, все они являются бета-версиями. Кстати, скачать последнюю версию всегда можно здесь.

Теперь рассмотрим основные фишки программы, и быть может вам она понравится:

1. Локализация

Google Web Designer поддерживает большое количество языков, в том числе и русский. Автоматически устанавливается язык системы, но вы можете легко поменять язык на другой в меню «Справка -> Язык». Кроме того справочная система тоже поддерживает русский язык.

2. Кроссплатформенность

Google Web Designer можно установить на многие операционные системы: Windows 7 и 8, Mac OS X 10.7.x или более поздние версии, Ubuntu 12.04 или более поздние версии, Debian 7 или более поздние версии, OpenSuSE 12.2 или более поздние версии и Fedora Linux 17.

3. Визуальный редактор

Визуальный редактор Google Web Designer позволяет рисовать, используя простые примитивы, такие как линии, овалы, прямоугольники и кривые. Здесь же можно добавлять текст, трёхмерные объекты, интерактивные компоненты и изменять их свойства. Компоненты есть следующие: «Интерактивная область», «Жест», «Графическая кнопка», «Кнопка вызова/SMS», «Таблица спрайтов», «Перелистываемая галерея», «Навигация по галерее», «Круговая галерея», «Панорамная галерея», «Видео», «YouTube», «Аудио», «Карта», «Просмотр улиц», «Добавить в календарь», «Окно iframe». Кроме стандартных компонентов можно создавать свои собственные компоненты и использовать компоненты сторонних разработчиков, часть из которых собрано в галерее «Google Rich Media Gallery».

4. Редактор кода

Редактор кода позволяет сразу же увидеть код страницы, которую вы нарисовали в визуальном редакторе. Редактор понимает и подсвечивает синтаксис следующих форматов: HTML, CSS, JavaScript и XML. Здесь же можно создавать и редактировать файлы этих форматов.

5. Библиотека объектов

Все необходимые для вашего проекта медиа файлы складываются в библиотеку объектов. Поддерживаются картинки форматов .JPEG, .JPG, .GIF, .PNG, .SVG, .BMP, видео форматов .MP4, .M4V, WebM, .OGG и аудио форматов .MP3, .WAV, .OGG. Кроме медиафайлов в библиотеку объектов автоматически попадают группы объектов. В группу можно объединить любые объекты. Получившуюся группу можно использовать как единый объект несколько раз в разных местах вашего баннера или страницы. А ещё объекты можно упаковывать в отдельный div и после этого работать с ними как с одним объектом.

6. Временная шкала для анимации

Для создания анимации в Google Web Designer есть шкала времени, с помощью которой необыкновенно удобно делать плавные переходы между кадрами, например, плавное появление или исчезновение картинок или их передвижение по баннеру или странице. Есть два режима для работы с анимацией: быстрый и расширенный. В быстром режиме кадры анимации строятся посценово для всех элементов сразу (см. первый рисунок ниже), а в расширенном – можно управлять анимацией каждого элемента отдельно, независимо от других элементов (см. второй рисунок ниже).

При переходе между кадрами поддерживаются различные виды динамики: постоянная скорость, быстро ускоряется и медленно замедляется, быстрая вначале и медленная в конце, медленная вначале и быстрая в конце, медленно ускоряется и медленно замедляется, см. картинку ниже. Если стандартные виды динамики не подходят, можно вручную настроить изменение скорости на свой вкус.

7. Готовые шаблоны для создания рекламных объявлений

Всего здесь вы можете найти три разных типа объявлений: баннер (простые объявления фиксированного размера), расширяемое объявление (раскрывающиеся объявления из маленького в большое) и межстраничное объявление (подходит для мобильных устройств, т.к. здесь автоматически определяется вертикальное и горизонтальное положение страницы). Кроме того объявления, которые вы создаёте, могут поддерживать несколько рекламных платформ: AdMob, DoubleClick и AdWords. И, конечно, можно сделать рекламное объявление без кода рекламной платформы.

8. Предварительный просмотр и публикация

Предварительный просмотр автоматически открывает окно браузера и отображает в нём ваше объявление или HTML-страницу. По умолчанию просмотр открывается в Chrome, но можно выбрать и другой установленный браузер. Публикация представляет из себя подготовку файлов и складирование их в локальную папку или на Google Диск. Перед публикацией вы можете задать параметры публикации, такие как, упаковка в ZIP-архив и сжатие HTML-разметки. Поддерживается также публикация в DoubleClick Studio.

Итак, если вы ещё думаете с помощью чего можно создавать рекламные объявления для сайтов или просто редактировать HTML-страницы, обратите внимание на редактор Google Web Designer, ведь здесь есть весь необходимый минимум для этого.

Источник