10 расширений для «яндекс.браузера», которые пригодятся каждому

Содержание

Reference

Это дополнительная панель, которая генерируется аддоном CodeBurner для Firebug. С помощью этой панели Вы получаете быстрый доступ к HTML и CSS коду.


  1. Секция поиска и фильтрации.
  2. Здесь выводится результат поиска. В нашем примере — один.
  3. Панель совместимости с последними версиями основных используемых браузеров. Chrome отсутствует в списке, но он использует тот же движок, что и Safari (Webkit), то есть совместимость с Safari означает совместимость с Chrome.
  4. Если информации недостаточно, то с помощью данной ссылки Вы сможете найти дополнительные сведения: примеры, описания и так далее.

Ключевые особенности

uBlock Origin, в отличие от встроенных во многие браузеры блокировщиков рекламы, не делает разницы между «навязчивой» и обычной, а убирает всю лишнюю информацию, оставляя страницу в ее первозданном виде. Касается это, кстати, и встроенной в видеопроигрыватели рекламы, которой успели надоесть многочисленные онлайн-кинотеатры. Так что если она не встроена в сам видеофайл до заливки, а идет отдельным блоком – вы можете о ней забыть.

После установки расширения uBlock Origin, возле адресной строки появится его значок. Нажав на него, вы будете получать информацию: сколько элементов заблокировано на данной странице. В настройках вы сможете добавить тот или иной сайт в исключения, или просто отменить работу блокировщика в данный момент на конкретной странице.

С помощью uBlock Origin можно заблокировать любой дополнительный элемент на странице, который вы сочтете лишним (случается, что рекламу размещают так хитро, что даже блокировщик не признает ее таковой, так что ручной режим порой полезен).

6 ответы

Хром

This can be achieved by three different approaches (see my blog article here for more details):

  • Search in panel like below
  • Execute and in panel, as shown in Lawrence’s answer
  • Third party extensions (not really necessary in most of the cases, could be an overkill)

Вот как вы просматриваете XPath в панели :

  1. Press F12 to open Хром Developer Tool
  2. In «Elements» panel, press Ctrl+F
  3. In the search box, type in XPath or CSS Selector, if elements are found, they will be highlighted in yellow.

Fire Fox

  1. Either select «Web Console» from the Web Developer submenu in the Fire Fox Menu (or Tools menu if you display the menu bar or are on Mac OS X) or press the Ctrl+Shift+K (Command+Option+K on OS X) keyboard shortcut.
  2. In the command line at the bottom use the following:

    • : Returns the first element that matches. Equivalent to or calls the function in the page, if it exists.

    • : Returns an array of DOM nodes that match. This is like for , but returns an array instead of a .

    • : Evaluates an XPath expression and returns an array of matching nodes.

Fire Fox (prior version 49)

  1. Install Firebug
  2. Install Firepath
  3. Press F12 to open Firebug
  4. Switch to panel
  5. In dropdown, select XPathor CSS
  6. Type in to locate

276

Вы можете открыть консоль в Chrome и Firefox и проверить XPath, введя . Это вернет массив согласованных значений. Если он пуст, вы знаете, что на странице нет совпадений.

Например:

Update (March 2016): A new screenshot from Chromium v48:

*

32

By using chrome or Opera

без каких-либо плагинов, не записывая ни одного синтаксического символа XPath

  1. right click the required element, then «inspect»
  2. right click on highlighted element tag, choose copy>Copy Xpath.

😉

13

Другой способ проверить xpath — использовать selenium IDE.

  1. Установить Firefox Selenium IDE
  2. Откройте приложение в FireFox и откройте IDE
  3. В среде IDE на новой строке вставьте свой xpath в цель и нажмите Найти. Соответствующий элемент будет выделен в вашем приложение

1

Вот расширение ChroPath для Chrome, у которого есть много дополнительных функций, сравниваемых с FirePath- Следуйте инструкциям ниже: 1) Откройте панель devtools. 2) Щелкните правой кнопкой мыши в любом месте веб-страницы. 3) Нажмите «Осмотр». 4) В правой части вкладки «Элементы» перейдите на вкладку «ChroPath». Здесь вы получите XPath/CSS, и вы также можете отредактировать и оценить его.

Ссылка для скачивания addon-

1

Я проверяю селектора XPath и Css, используя расширение Natu WebSync для Chrome .

Оно может:

  • разделить селектор на части и проверить их отдельно.
  • показать цветом, сколько элементов найдено для каждой части селектора. 0 — красный, 1 — зеленый, несколько — желтый
  • выделить элементы на странице, когда я нахожу селекторную часть
  • перейдите к элементу выбора на вкладке Элементы, когда я нажимаю селекторную часть

Это может быть очень полезно для тех, кто должен писать и проверять сложные селекторы.

Вот у этих сайт быстро грузится, а у нас чего так…

не балбес

Обновление от 18.02.15 — wordpress.org/plugins/youtube-speedloadНа сегодня остается проблемой большое количество роликов ютуб на одной странице. Page speed хоть и покажет все 100 баллов, но скорости из-за какой либо оптимизации не прибавится. Флеш все таки очень долго загружается. Решение, наверно, как в контактике: подкладывать скриншоты с плером а по щелчку уже подгружать сам контейнер. Ну или плеер на HTML5.

PageSpeeddevelopers.google.com/speed/pagespeed/download?hl=ru-RUyslowaddons.mozilla.org/ru/firefox/addon/yslow

8. Почему так стилей-то много для одной страницы? Ёё

CSS Usageaddons.mozilla.org/ru/firefox/addon/css-usage

Под конец домашнее задание: не берущаяся для верстки таблица. Мне захотелось предвнести в оформление таблиц чуть больше художества, что естественно вызвало напряжение в голове при верстке. Я не справился. Задание: У нас есть таблица, которая должна тянуться по ширине и по высоте. Заморочка в том, что на краях таблицы находятся уникальные тени и края. Стоит ли овчинка выделки?Скачать PSD файл . Изменить расширение на zip.

Как найти необходимые файлы шаблона?

Один из методов поиска файлов шаблона с искомым кодом состоит в использовании Total Commander. В нем есть функция поиска файлов по содержимому («Команды» — «Поиск файлов» или Alt+F7). Скачайте архив с  файлами сайта на свой компьютер через FTP-соединение. В этом может помочь статья об архивации файлов на сервере.

Теперь в коде, который отвечает за элемент, измененный вами в FireBug, найдите по возможности редко встречающуюся часть. Это может быть участок кода, помещенный в теги div или id.


Например, мне нужно найти такой участок:

Он должен быть относительно уникален, иначе, может быть найдено слишком много файлов с одинаковыми частями кода.

Перехожу в скачанную папку с файлами WordPress и нажимаю поиск в Total Commander.

Нужно поставить галочку в графе «С текстом» и вписать туда искомое значение, по которому мы хотим определить нужный нам файл. Нажимаем поиск. Если файлов оказалось чересчур много, поищите другую часть кода в FireBug, которая будет более уникальной. Если же файлов несколько, открывайте их по одному и в редакторе (например, Notepad ++) и при помощи поиска ищите заданный текст (у меня «zar»). Проверьте, насколько весь блок соответствует тем значениям, которые вы видите с помощью дополнения FireBug. Если все сходится, вносите изменения в код файла и загружайте его на сервер.

Таким образом, с помощью Файрбага вы можете изучать файлы вашего движка и их наполнение. Это поможет вам лучше разбираться в его структуре и содержимом. Кроме того, вы можете использовать Фаербаг для Фаерфокс при изучении других сайтов, стиль которых вам интересен. Так вы сможете почерпнуть много нового в сфере html-верстки, css-классов и стилей, и в сайтостроении в целом.

P.S. А я по традиции после Хибин поехала на свою малую родину, в Североморск. Тут зима в самом разгаре, мороз, метель и сугробы. Бегаю на лыжах и наслаждаюсь зимой, которой так не хватало жителям СПб в этом году.

Для чего нужен FireBug?

В первую очередь ФайерБаг – это инструмент для просмотра исходного кода страницы или ее элемента. Этот код будет отличаться от кода в ваших файлах php шаблона WordPress. Однако изучение исходного кода дает понимание того, какие его части отвечают за те или иные элементы страницы.

Кроме того, FireBug позволяет править код прямо в браузере и следить за изменениями элементов. Эти изменения увидите только вы, после обновления страницы все станет как прежде. Если вы решите оставить внесенные вами правки, потребуется искать файлы шаблона, которые отвечают за выбранную вами часть страницы. В идеале, вы должны хорошо знать свой шаблон и за что отвечают все его файлы. Для начала изучите статью про структуру шаблона WordPress. Но если вы все же не можете найти, куда вносить изменения, ниже я расскажу про один из способов поиска необходимых файлов.

Эй, умник! Какой цвет ссылки для ховера посоветуешь?! — Ну… эээ…

Обновление от 18.02.15 — это сейчас реализовано и в хроме.Внимание. на 26.06.2013 в php storm это реализовано чертовски удобно

При редактировании css cлева от номеров строк какого либо стиля с цветом, есть его превьюшка, щелчек по которой открывает палитру или доступ к уже использованным цветам. firepickerFirepickerthedarkone.github.com/firepicker

Раньше была очень актуальна программа Stylizer Но firebug + firepicker по универсальности выигрывает с отрывом. Да и бесплатны они. В верстке очень мало реалтайм событий. На ctrl+s-> alt+tab-> f5 уже стали суставы срастаться. Именно такие реалтайм инструменты и будут востребованы в будущем, я думаю это очевидно.

О расширении

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

Им-то хорошо, они на этом деньги делают, а пользователю куда деваться? Нет, перерубать интернет-кабель топором и сбегать на необитаемый остров совсем не обязательно. Достаточно просто установить на свой браузер блокировщик рекламы.

Неплохом вариантом для этой цели будет uBlock Origin. Он легко заблокирует «лишние декорации» на странице, при этом не тормозя работу. Решение скачать uBlock на русском языке сильно облегчит вам жизнь во время серфинга в Сети. Проверено.

Как пользоваться FireBug?

Итак, после того, как вы скачали и установили плагин FireBug для Firefox, справа в верхней панели браузера у вас появится значок с жуком.

Чтобы его активировать вы можете кликнуть правой кнопкой мыши и выбрать «Инспектировать элемент с помощью FireBug». Либо выбрать в раскрывающемся списке под жучком опцию «Включить на всех страницах». Внизу экрана появится такое окно:

Это и есть рабочая область для просмотра и редактирования элементов страницы.

Для того чтоб понять, как пользоваться плагином FireBug для начала нужно разобраться с основным набором его инструментов

В этом уроке мы уделим внимание закладкам HTML и CSS

Работа с HTML

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

Вот, к примеру, я выделяю картинку с ноутбуком и внизу вижу ее соответствие в коде.

Работает и обратная последовательность: просматривая код в окне Фаербага, на странице будут автоматически выделяться соответствующие ему элементы.


Теперь, если вы хотите поменять, к примеру, размер картинки и посмотреть, как это будет выглядеть, нажмите кнопку «Редактировать».

Здесь вы можете менять любые параметры и сразу же видеть результаты этих изменений.

Например, уменьшим размер картинки вдвое:

Но помните, что стоит обновить страницу и все вернется к исходному виду. Как же сохранить изменения из FireBug? Для этого нужно найти файл шаблона, который отвечает за данный элемент. В моем случае, картинка просто находится в тексте статьи. Но вы, возможно, захотите изменить элемент из шапки или сайдбара, тогда и искать его нужно будет в файлах header.php и sidebar.php соответственно. Затем скопировать измененный в Файрбаге код и заменить соответствующие строки файла.

Работа с CSS

Теперь перейдем к стилям. Возьмем для примера социальные кнопки под статьей.

Нужный нам блок будет подсвечен голубой заливкой:

Здесь мы можем поменять толщину, цвет и стиль верхней и нижней границы элемента (border-bottom, border-top), его высоту (height), величину отступа от нижнего края (margin-bottom),ширину полей (padding), позицию элемента относительно окна браузера (position). Кроме того, сюда можно добавлять дополнительные параметры стиля. Значения перечисленных показателей можно увидеть наглядно, если перейти на вкладку «Макет».

После того, как вы внесли правки, и результат вас удовлетворил, можно вносить изменения непосредственно в файл стилей.

Списки фильтров

Списки фильтров будут загружены и применены:

  • EasyList;
  • Список рекламных серверов Питера Лоу;
  • EasyPrivacy;
  • Вредоносные домены.

Также на выбор доступны другие списки:

  • Фанатский улучшенный список отслеживания;
  • Хост-файл Дэна Поллока;
  • Рекламные и отслеживающие сервера hpHosts;
  • MVPS HOSTS;
  • Spam404.

Чем больше фильтров, тем выше использование памяти. Тем не менее даже после добавления трёх дополнительных списков uBlock₀ всё ещё потребляет меньше памяти, чем другие популярные блокировщики. Также имейте в виду, что некоторые их этих списков имеют высокую вероятность поломать веб-сайт, особенно те, что созданы из хост-файлов. Без предустановленных списков фильтров это расширение — ничто.

О расширении

NoScript – расширение Firefox, блокирующее исполнение JavaScript, апплетов Java, Flash и других потенциально опасных компонентов HTML-страниц до тех пор, пока пользователь не разрешит их исполнение на данном узле или глобально.

Браузер Mozilla Firefox заботится о безопасности пользователя. В обозревателе имеются встроенные средства защиты компьютера. Увы, этого оказывается не всегда достаточно. Однако беде легко помочь – установить расширение, которое будет оберегать вас в процессе серфинга по сети. Одним из неплохих вариантов дополнений, которые защищают вас при работе в Firefox, является NoScript.

Сеть

Хотите знать, сколько времени загружается Ваша страница? Или нужно определить какой скрипт выполняется дольше всего? Все это можно определить с помощью панели Сеть.

  1. Запросы могут быть отфильтрованы в соответствии с их типом.
  2. Каждый запрос отображается в данной секции. В конце списка запросов подводится итог: количество запросов, размер, сколько уже помещено в кэш и общее время выполнения.
  3. Можно получить более детальное описание: заголовки HTTP, ответы и кэш.

Выполнение тестирования

Нужно протестировать производительность определенной функции или цикла? Используйте свойство Firebug “timer”.

Три шага. Вызываем “console.time”. Затем вставляем наш код. В завершении вызываем “console.timeEnd”.

Script (Сценарий)

Большую часть времени Вы будете работать с панелью Консоль. и только в особенных случаях переключаться в панель Сценарий. Смоделируем эти особенные случаи и познакомимся с панелью поближе.

  1. Выпадающая кнопка, которая позволяет выбрать нужный скрипт файл.
  2. Функции отладки: продолжить, шаг с заходом, шаг с обходом and шаг с выходом. Они могут быть нажаты только тогда, когда выполнение кода достигнет точки прерывания.
  3. Основное окно. Здесь мы устанавливаем (и удаляем) точки прерывания, так же как и проверяем код Javascript.
  4. Подобно панели DOM, секция Наблюдение содержит методы и параметры объекта для отлаживаемого кода.
  5. Показывает стэк функций в реальном времени.
  6. Список всех текущих активных точек прерывания. В данной панели можно только удалять точки прерывания.

Консоль

Первое, что Вы должны заметить, открывая Firebug (либо из строки статуса, либо с использованием сочетание клавиш ctrl+F12) — это панель Console (Консоль). С первого взгляда может показаться, что это очередная версия консоли ошибок (Ctrl+Shift+J). У них есть две общие функции:

  • отображение ошибок, предупреждений и сообщений
  • способность выполнять код Javascript

Но Firebug расширяет функциональность Firefox:

  • отображение ошибок для Javascript, CSS, XML, XMLHttpRequest (AJAX) и Chrome (внутри Firefox)
  • выполнение кода Javascript для текущей страницы
  • размещение дополнительного объекта Javascript

Давайте посмотрим на примеры и использованием консольного объекта. Допустим, что выполняется следующий код HTML:

Выполнение кода генерирует следующий вывод:

5 последних уроков рубрики «Разное»

  • Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.

  • Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

    Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

  • Создание вебсайта — процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.

  • Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Как установить Фаербаг для Мазилы и других браузеров?

Для начала нужно установить дополнение Фаербаг в ваш браузер.

Можно скачать Firebug с официального сайта Мозиллы и установить его. Но проще будет перейти в раздел «Дополнения» браузера и ввести в строку поиска «Firebug», затем нажать «Установить».

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

Можно скачать Фаербаг для Хрома и Opera на официальных сайтах этих браузеров.

Работать с ним можно, кликнув по странице правой клавишей и выбрать «Просмотр кода элемента», либо нажав F12. Сама я часто пользуюсь этим расширением для Гугл Хром. Однако, по моему мнению, для новичков Фаербаг более понятен и удобен. Кроме того, он переведен на русский язык в отличии от инструмента для просмотра кода в Хроме.

Installing Firebug on IE, Safari, Chrome or Opera

Firebug Lite makes it possible to install Firebug into any web browser! You should be able to use Firebug with Internet Explorer, Opera, Safari, Chrome, and any other browser that supports JavaScript. Firebug Lite is written in JavaScript, so you can include it on a webpage with the following code:

<script type='text/javascript'
     src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

Or even better you can use this bookmarklet:

Firebug Lite provides you with the same inspections capability that regular Firebug does. You can click the Inspect button and hover over sections of the page to view the computed style and DOM properties for the tag selected.

The Inspect button functionality does seem to have some issues, so another way to inspect elements is to navigate the HTML tree. To do that, click the + signs on the tree view to expand the HTML, and when you see the element you want to inspect, click on the line of code for it in the HTML. On the right side, you can view the computed style and the DOM (Document Object Model) properties for the element.

Firebug Lite also has the JavaScript console, which allows you to execute JavaScript. You can write one line at a time, or in the expanded view you can write many lines at once and then run the code.

Although you cannot edit the CSS for the highlighted element, Firebug Lite does provide a mechanism for editing CSS. It is somewhat of a «CSS console» for lack of a better term, where you can write your own CSS code and see what the results will look like.

Of course, with a name like Firebug Lite you can’t expect it to have all of the features of Firebug. Unfortunately, it does not include any JavaScript debugging (I can’t even imagine how difficult it would be to write a JavaScript debugger in Javascript). Unfortunately, you’re still stuck with whatever JavaScript debugging tools you can find for your browser. It does at least provide you with the convenience of being able to easily view the code for script files that were loaded in the page.

Firebug Lite also lacks the layout features in regular Firebug, where it shows you the coordinates for the element being inspected, as well as the padding, border size, and margins.

All in all it is better to have Firebug Lite for other browsers than no Firebug at all. If you are trying to debug layout and viewing issues in other browsers, it is definitely a nice tool to try out.

Have you ever used Firebug Lite? Did you use Firebug on IE, Safari, Chrome or Opera before? If so, what are your favorite features?

Google Starts Rolling Out Its G Suite Gmail Integration

A G Suite Gmail integration is coming soon, with Google adding its Meet, Rooms, and Chat services to Gmail on Android and the web.

About The Author

I’m a fairly typical geek that spends hours in front of a computer monitor at work as well as at home. I also enjoy putting together nifty tools and gadgets.

More About Jorge Sierra


С этим читают