Html редактор google chrome

Заметки верстальщика: Полезные расширения Google Chrome в 2019 году

В моем браузере установлено около 30 расширений, которые упрощают жизнь и работу в интернете. В этой статье я хочу поделиться 10 актуальными расширениями Google Chrome для верстальщика, которые постоянно использую при разработке сайтов.

1. PerfectPixel

Пример использования PerfetPixel при разработке новых блоков на www.wrike.com

Верстка сайта пиксель-в-пиксель вызывает трудности как у новичков, так и у опытных специалистов. PerfectPixel накладывает изображение макета поверх верстки в браузере. В настройках расширения можно отрегулировать прозрачность и расположение макета, что позволяет учесть все необходимые размеры и отступы. Использование этого плагина упростит работу верстальщика и сократит количество правок при сдаче проекта. В моем наборе расширений PerfectPixel занимает первое место за счет своей функциональности и удобства использования.

2. Wappalyzer

Пример использования Wappalyzer на сайте collaborate.wrike.com/2019/london

Всегда интересно какие инструменты и технологии используются на сайтах. Wappalyzer предоставляет информацию о CMS, JS фреймворках, CSS библиотеках, инструментах аналитики и многом другом. Представьте, что анимация на сайте – это бесплатная CSS библиотека, которую вы можете использовать у себя в проекте. Это позволит сократить время поиска необходимого инструмента и быть в курсе технологий, которые использует сайт.

3. HTML5 Outliner

Иерархия заголовков на странице habr.com/ru/company/wrike

HTML 5 Outliner отображает список заголовков на странице сайта. Расширение помогает структурировать заголовки и определять нарушения в иерархии. Например, в теге section HTML 5 Outliner выводит предупреждение об отсутствии тега h2. Это один из быстрых и удобных способов, чтобы определить правильность использования заголовков в верстке.

4. Wireframify

Пример использования Wireframify на сайте www.wrike.com

Дизайнеры проектируют сайты с помощью wireframe — это набор линий, блоков и подписей. Такой подход позволяет создавать архитектуру проекта с учетом отступов, размеров и расположения блоков на странице. Wireframify включает альтернативный вид сайта в виде wireframe, что позволит избежать ошибочного использования:

• отрицательных margin;
• выравнивания элементов с помощью padding;
• добавления отступов с помощью CSS свойств left, right;

5. PageLiner

Пример использования PageLiner на сайте www.wrike.com/apps

В графическом редакторе выровнять элементы или отобразить сетку сайта можно с помощью направляющих линий. Верстальщик может включить этот функционал в браузере используя PageLiner. Расширение отображает похожие направляющие, как в том же Adobe Photoshop. С PageLiner выравнивать элементы становится намного проще.

6. Web Developer

Список возможностей web developer

Web Developer добавляет в браузер дополнительную панель с инструментами. Внутри нее находится 10 вкладок: Disable, Cookies, CSS, Forms, Images, Information, Miscellaneous, Outline, Resize и Tools. Функционал расширения позволяет:

• отключать CSS, JS и изображения;
• проверять валидность HTML, CSS;
• манипулировать CSS стилями;
• тестировать HTML формы;
• отображать необходимую информацию мета тегов;
• изменять размер окна браузера;
• очищать кэш;

Web Developer остается популярным расширением среди разработчиков. Его можно сравнить с мультитулом в реальной жизни: всегда под рукой необходимый набор инструментов.

7. User CSS

Пример использования User CSS на сайте www.wrike.com/customers

Представим, что вы захотели поправить CSS прямо в браузере, но после этого пришлось перезапустить страницу. Все ваши наработки пропали, и приходится вносить изменения заново. Используйте User CSS, который будет сохранять ваши стили. Больше не нужно переживать по поводу того, что CSS исчезнет. Функциональность расширения позволит тестировать написанный CSS при переходе на другие страницы.

8. StyleURL

Пример использования StyleURL на сайте Wrike www.wrike.com/customers

User CSS не заменит панель разработчика браузера. Если вы привыкли работать в devtools и при этом не хотите потерять изменения после обновления браузера – установите StyleURL. Расширение запомнит ваши изменения и предоставит возможность сохранить наработки в отдельном файле или загрузить в github gist.

9. Siteimprove Accessibility Checker

Пример использования Siteimprove Accessibility Checker на сайте www.wrike.com/newsroom

Siteimprove Accessibility Checker — это инструмент, который проверяет HTML на соответствие стандартам доступности, чтобы обеспечить доступ к контенту для всех. Расширение отображает ошибки с подробной информацией. В описании к ним вы можете найти сноски с WCAG 2 и прямые ссылки на подробные статьи о доступности.

10. Tabsbook

Пример использования Tabsbook

Каждый работает с закладками по-своему. Есть те, кто сохраняет ссылки для быстрого доступа к сайтам, и те, кто используют закладки, чтобы хранить полезную информацию. С помощью Tabsbook можно превратить ваши закладки в базу знаний. Интерфейс расширения отображает древовидную структуру папок для удобной навигации по вашим закладкам. Все данные хранятся в облаке, что позволяет иметь доступ к ним с любого устройства.

Расширения будут полезны всем новичкам и опытным специалистам, которые о них не знали. Напишите в комментарии, какие расширения вы используете.

• google chrome
• chrome extensions
• верстка сайтов
• расширения для браузеров
• perfect pixel
• wappalyzer
• wireframily
• pageliner
• web developer
• user css
• accessibility
• tabsbook

Источник

How to Edit Source Files Directly in Chrome

While tools such as live reloading have made this process easier, many developers continue to tweak code in both DevTools and their editor.

However, it’s possible to open and edit source files directly in Chrome. Any changes you make are saved to the file system and updated within the editor (presuming it refreshes when file changes occur).

Step 1: Launch Developer Tools

Open Chrome, load a page from your local file system/server and open Developer Tools from the More tools menu or press F12 or Ctrl/Cmd + Shift + I depending on your system. Navigate to the Sources tab to examine the file explorer:

You can open and edit CSS and JavaScript files in this view, but any changes will be lost as soon as you refresh the page.

Step 2: Associate a Folder with the Workspace

Click the Filesystem tab, then click + Add folder to workspace. You’ll be prompted to locate your work folder and Chrome will ask you to confirm that you Allow access. The explorer shows files on your system which can be opened with a single click:

Step 3: Edit and Save Your Code

You can now jump in and edit your code. Unsaved edits are marked with an asterisk on the file tab.

CSS changes are instantly updated but, in the case of HTML and JavaScript, you’ll normally need to press Ctrl/Cmd + S to save the file to the file system then refresh the browser.

Note that you can also right-click the file tab and select Save as… to save a copy of the file elsewhere.

Step 4: Review and Undo Changes

To review changes, right-click a file tab and choose Local modifications… from the context menu:

A diff-like view is shown. The arrow icon at the bottom-left of the pane will undo all changes and revert the file to its original state.

Chrome’s Developer Tools will never be a full replacement for your favorite editor, but it can be useful when you’re making quick changes or working from another PC where your editor may not be installed.

Share This Article

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he’s been advocating standards, accessibility, and best-practice HTML5 techniques. He’s created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He’s written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

Источник