Фаербаг для хрома: Firebug Lite for Google Chrome

Разное 

Как использовать Firebug в IE, Safari, Chrome и Opera / Хабр

Firebug Lite позволяет использовать Firebug практически в любом броузере! Можете сами попробовать в Internet Explorer, Opera, Safari, Chrome или любом другом броузере, поддерживающим JavaScript. Firebug Lite написан на JavaScript, значит, все что вам нужно сделать — это добавить на страницу следующий блок кода:

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

* This source code was highlighted with Source Code Highlighter.

Или, что будет даже лучше, воспользоваться этой закладкой:

Firebug Lite

Firebug Lite позволяет проводить детальный осмотр DOM-элементов также, как это происходит в обычном Firebug. Вы можете нажать кнопку Inspect и указать элемент страницы, чьи DOM-свойства или стили Вы хотите узнать.

Кажется у этого функционала есть несколько проблем, но есть другой способ узнать свойства элементов страницы — это навигация через дерево элементов.

Нажмите на «+» в дереве элементов и выбирите нужный вам объект. Справа вы увидите стили и DOM свойства, выбранного обхъекта.

В Firebug Lite также встроена JavaScript консоль, позволяющая выполнять JavaScript код на лету. Можно писать одну строчку кода за раз либо переключиться в расширенный режим, где можно уже писать многострочные скрипты, прежде чем выполнить их.

Хотя и не разрешается изменять CSS свойства для выбранного элемента, Firebug Lite имеет встроенный механизм, позволяющий это делать. Можете назвать его «CSS консоль», так как здесь вы можете написать свой собственный CSS стиль и посмотреть, что получиться из этого.

Конечно, это не полноценный Firebug, хотя бы потому, что в имени присутсвует слово Lite. Также к сожалению в нем нельзя отлаживать Javascript (я не представляю как сложно написать Javascript отладчик на Javascript). Так что, Вы все еще привязаны к своему отладчику, который используете в выбранном броузере. Но по край не мерее Firebug Lite предоставляет удобный способ просматривать код javasript файлов, которые загружаются на странице.

Firebug Lite также нуждается в такой фишке обычно Firebug’а как просмотр padding, border и margin выбранного элемента в удобной графической форме.

Как бы то ни было, лучше иметь урезанный Firebug, чем не иметь его совсем. Если вы пытаетесь отлаживать разметку в разных броузерах, это определенного интересный инструмент, который стоит того, чтобы его попробовать.

Вы кода-нибудь использовали Firebug Lite? Вы использовали Firebug в IE, Safari, Chrome или Opera до этого? Если да, какие у вас любимые фишки?

P.S. От себя добавлю, что это очень и очень ограниченная версия, но для быстрой проверки использоваться может и нужно (если нету ничего полноценного под рукой).

P.S. 2 — Огромная просьба, отпишитесь когда минусуете, чтобы хоть знать за что?

Firebug (сейчас DevTools)— как пользоваться веб-инспектором ДевТулс для вебмастеров в 2023 году

Обновлено 8 января 2023 Просмотров: 161 557 Автор: Дмитрий Петров

В рамках этой рубрики хочу сегодня поговорить о расширениях для Firefox и дополнениях для Opera, помогающих при верстании сайта, а так же при работе по его продвижению в поисковых системах.

Сам я являюсь давним поклонником Opera, еще с тех времен, когда она была платной. По моему мнению, лучшего браузера для серфинга по сети не найти.

Но для работы над сайтом Opera подходит гораздо меньше, чем всем известный браузер Firefox. Оперу, конечно же, тоже можно заточить под верстку сайтов, но у нее, как ни крути, нет такой штуки, как Firebug, а это для начинающего верстальщика ой как важно. Хотя время летит и с момента написания этой статьи разработчики браузеров, видимо меня услышав, добавили во все свои творения базовые возможности героя сегодняшней статьи, но оригинал то все равно остается лучшим из лучших. ИМХО.

Плагины для браузеров, помогающие вебмастерам

Файрбаг изначально являлся расширением только для Mozilla Firefox и он позволял существенно снизить время на нахождение и исправление нужного фрагмента в Html коде, а если вы начинающий вебмастер или структура файлов движка CMS (системы управления контентом) вам совершенно незнакома, то я вообще не представляю, как можно обойтись без него.

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

Вот и приходилось мне раньше жить на два дома. В Opera я бродил по интернету, а в Firefox — работал над своими проектами, постоянно используя возможности расширения, о котором сегодня пойдет речь.

Но кроме верстальных дополнений для браузеров вам, наверняка, при работе с вашими проектами могут понадобиться и SEO расширения, позволяющие оперативно отследить PR и ТИЦ открываемых в обозревателе страниц, посмотреть закрыты или нет для индексации поисковиками внешние ссылки на этих страницах (особенно это интересно при комментировании блогов и поиске так называемых Dofollow блогов) и многое другое (ссылки на них смотрите в самом начале статьи).

Если уж речь зашла о браузерах, то мне очень понравился новый новый набор инструментов для разработчика в Chrome — быстрый, даже в сравнение с Opera, удобный и красивый, но пока я еще не разобрался, есть ли к нему расширения подобные тем, что я опишу ниже.

Firebug — это не просто дополнение, добавляющее какой либо расширенный функционал вашему Фаерфоксу. Очень верно про это написано на странице разработчиков — это эволюция web-разработки.

Внимание! Сейчас Фаербаг по умолчанию интегрирован в браузер Мазила Фаерфокс в качестве налога Chrome DevTools. Их функционал очень схож и разобравшись в одном из них, вы разберетесь автоматов и в другом.

Бывает, что вам нужно что-то поменять, доделать, исправить, просто посмотреть как это реализовано и работает на своем или чужом ресурсе. Да, да, вы не ослышались, именно на чужом ресурсе. Понравилось вам то или иное решение вебмастера и вы хотите сделать у себя так же — Фаербаг вам поможет.

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

Как пользоваться Firebug (сейчас DevTools) при верстании сайта

А он предлагает вам щелкнуть по интересующему месту вебстраницы, опять же правой кнопкой, и выбрать из контекстного меню — «Анализировать элемент» (в англоязычной версии плагина это будет “Inspect”). И вам, о чудо, откроется в его окне только тот участок кода страницы, который отвечает за формирование именно того элемента, который вам интересен. Удобно?

Безусловно. Только за одно это следует полюбить данный плагин. Но ведь он может много чего еще. Код нужного вам элемента вы увидите в открывшемся внизу страницы окне этого дополнения, показанном на рисунке выше. Тот участок кода, который отвечает за интересующий вас элемент веб страницы, будет подсвечен синим.

Так же обратите внимание на подчеркнутую мною на рисунке красной линией строку, начинающуюся с слова «Редактировать» в окне Фаербага. Если вы щелкните по этому слову, то сможете внести изменения в выделенный фрагмент Html кода, которые тут же отобразятся на странице.

Измените, например, в окне плагина url картинки на намерено несуществующий и картинка исчезнет с вебстраницы, вернете все обратно и картинка появится. Но обратите внимание — эти изменения никак не отразятся на вашем ресурсе, все изменения увидите только вы и только на этой вебстранице, подчиненной всемогущему огненному жуку. Как только вы обновите страницу, то все внесенные плагином изменения исчезнут.

С помощью Firebug можно смоделировать то, что может произойти при изменении Html или CSS кода вебстраницы. Вы можете таким образом, с помощью его возможностей, посмотреть (не тратя времени на поиск файла движка вашей CMS, отвечающего за вывод этого участка) разные варианты и выбрать нужный, или же вообще отказаться от изменения, если текущий вариант окажется не так уж и плох.

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

Проблема поиска нужного участка кода в файлах движка

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

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

Потом, со временем, набравшись опыта, для вас это не будет составлять труда, а пока я предлагаю вам действовать по следующей схеме. Палю тему, как любят говорить на SEO форумах и блогах  — шутка, никакого секрета тут, конечно же, нет.

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

Я советую цепляться за CSS классы или ID тех или иных Html тегов. Допустим, в контейнере (контейнером называют участок кода, заключенный в теги DIV, c прописанными классами или ID), в котором находится тег нужного вам элемента вебстраницы, прописан какой-то CSS класс или ID (например, так div).

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

Поиск по содержимому файлов движка при помощи Total commander

А все очень просто: нужно скачать все файлы движка на свой компьютер, подключившись к серверу хостинга по FTP, и воспользоваться возможностью искать по содержимому файлов такой замечательной программы, как файловый менеджер Total commander. Вы открываете папку со всеми файлами движка в Тотал Коммандере и выбираете из верхнего меню программы «Инструменты» — «Поиск файлов» или просто нажимаете Alt+F7 на клавиатуре.

В открывшемся окне вы ставите галочку в поле «С текстом», убеждаетесь, что в поле «Место» указано правильное месторасположение ваших файлов движка вебсайта, а поле «Искать» не должно быть заполненным. В результате, Total commander выдаст вам список всех файлов движка, в которых встретился нужный нам CSS класс. Этот класс или ID вы выбрали раньше в качестве маячка при просмотре фрагмента вебстраницы через Firebug.

Если файлов, в которых встречается данный CSS класс не слишком много, то можно открыть их все по очереди в лучшем Html редакторе Notepad и, при помощи его поиска, найти места, где встречается данный класс.

Если файлов движка, где встречается искомый маячок слишком много, то нужно взять другой ключ (маячок) для поиска, изучив повнимательнее нужное место вебстраницы с помощью все того же Фаербага. Если же все сложилось удачно и вы не только нашли, но и исправили нужный участок Html кода, то вам нужно будет загрузить этот исправленный файл движка обратно на сервер в ту папку, где он и должен лежать, заменив существующий на сервере.

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

При осуществлении поиска по содержимому файлов в Тотал Коммандере, может возникнуть проблема с русскими словами, а точнее их кодировкой. Если Total commander ничего не нашел по вашему запросу на русском, поставьте галочку напротив «UTF-8» в окне поиска и все найдется.

Возможности и принципы использования Firebug (сейчас DevTools)

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

Кроме описанного чуть выше способа (щелкнуть по интересующему месту вебстраницы правой кнопкой и выбрать из контекстного меню — «Анализировать элемент») это расширение можно вызвать к жизни и простым нажатием на иконку паучка в правом нижнем углу окна браузера или же с помощь клавиши F12. Повторное нажатие по этой клавиши приведет к закрытию окна Фаербага.

Если вы хотите, чтобы плагин открылся в отдельном окне, то щелкайте по паучку удерживая Shift на клавиатуре или используйте сочетание клавиш Ctrl+F12. Вы сами выберите наиболее удобный для вас вариант вызова к жизни этого шедевра инженерной мысли. Окно его будет выглядеть у вас примерно так:

Сверху будут расположены кнопки панели управления, а основная часть окна будет разделена на левую и правую половину. В левой половине вы можете наблюдать структуру HTML кода открытой в браузере страницы, а в правой половине — стили CSS, которые используются для задания того или иного вида этого веб документа.

Как я уже говорил ранее, в тсовременной блочной верстке принято использовать HTML лишь для задания наполнения страниц контентом, а для задания нужного внешнего вида этого наполнения используются свойства таблицы стилей CSS.

Как использовать Фаербаг (сейчас DevTools) для изучения HTML

Firebug же позволяет реализовать две очень интересные возможности, помогающие разобраться с устройством кода открытой в браузере страницы. Можно водить мышью по самому HTML тегу в окне этого плагина, а на вебстраничке будут выделяться те элементы, за формирование которых этот тег отвечает (щелкаете, например, по Div контейнерам и тут же увидите вверху подсветку этого контейнера в дизайне вебстраницы).

А можно, наоборот, активировать такой хитрый режим в этом расширении, что при этом, мышью вы будете водить по самой вебстраничке, а HTML код, соответствующий тегам (находящимся под курсором мыши), будет в реальном времени показываться в окне Фаербага. Просто незаменимая вещь при изучении устройства того или иного веб ресурса, особливо для начинающих.

Для осуществления всего того, что я только что описал, нам понадобится информация, отображаемая в левой половине окна плагина, где отображаются теги данной вебстраницы открытой в браузере. Там Вы можете наглядно видеть вложенность друг в друга тех или иных тегов, например, контейнеров DIV.

Для раскрытия содержимого тега можно нажать на плюсик рядом с ним. Подводя мышку к тому или иному контейнеру DIV в левой части окна Firebug вы можете наблюдать, какие элементы вебстраницы входят в данный DIV-контейнер.

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

Как видно из приведенного выше скриншота, контейнер <div></div> отвечает за вывод блока с заголовком и описанием моего WordPress блога.

Но можно пойти от обратного для получения через Firebug информации о том, какой тег за вывод какого блока на данной вебстранице отвечает. В этом случае, мы будем подводить мышь не к DIV блокам с кодом, а напрямую к интересующим нас элементам открытой в браузере вебстранице. При этом в окне плагина, в области для показа HTML кода, синим фоном будут подсвечиваться те теги (например, DIV контейнеры), которые отвечают за формирование данного блока.

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

Для реализации этого способа нужно будет только активировать соответствующий режим, нажав на показанную на рисунке кнопку панели:

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

После того, как нужный фрагмент найден, вы можете щелкнуть по нему левой кнопкой мыши и перейти в левое поле окна Фаербага для дальнейшей работы с тегами этого элемента дизайна. С тегами в окне плагина можно производить любые манипуляции и результат вы увидите сразу же на открытой в браузере странице.

При этом, естественно, никаких изменений в реальных файлах движка сайта производиться не будет. Но зато, вы сможете в реальном времени промоделировать различные варианты построения дизайна вебстраницы. Если же новый, смоделированный с помощью Firebug вариант вас устроит, то придется вносить изменения уже в реальные файлы движка, найти которые вы сможете,используя описанный чуть выше способ с участием Total commander.

Как использовать Firebug (сейчас DevTools) для работы с CSS

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

Для наглядной демонстрации возможностей CSS в оформлении какого-либо элемента вебстраницы, вы можете подвести курсор мыши к какому-либо стилевому правилу, приведенному в правой части окна. Рядом с этим правилом появится серый перечеркнутый кружочек. Щелкнув по нему мышью вы отключите данное CSS свойство на этой вебстранице и рядом с ним появится красный кружочек.

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

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

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

Как измерить скорость загрузки сайта в Фаербаге (сейчас DevTools)

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

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

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

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

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

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

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

Плагин этот называется Web Developer и имеет просто огромное количество всевозможных инструментов, позволяющих упростить работу по верстке или корректировки шаблона вашего веб ресурса. Ну, а дальше мы перейдем к рассмотрению SEO плагинов для FireFox и Opera.

Можете также посмотреть видео по теме, которое лишним уж, наверняка, не будет:

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Как установить firebug в хром

Здравствуйте, я новичок в этой установке и хочу использовать Firebug для Chrome. Может ли кто-нибудь помочь мне с тем, как это сделать?

  • селен
  • селен-веб-драйвер
  • селен-тестирование
  • селен-java
  • селен-огненный жук
  • гугл-хром
21 декабря 2018 г. в селене к Джино • 5 810 баллов • 14 744 просмотра

1 ответ на этот вопрос.

0 голосов

Связанные вопросы в селене

Привет @Charumatibahen, поджигателя больше нет в . .. ПОДРОБНЕЕ

ответил 28 декабря 2018 г. в селене к Приядж • 58 100 баллов • 16 031 просмотр

Сначала вам нужно скачать драйвер Chrome … ПОДРОБНЕЕ

ответил 26 авг. 2019 г. в селене к Абха • 28 120 баллов • 1441 просмотр

  • селен
  • селен-веб-драйвер
  • селен-тестирование

Ниже вам помогут: Вы можете отключить … ПОДРОБНЕЕ

ответил 11 мая 2018 г. в селене к Самарпит • 5 910 баллов • 12 670 просмотров

  • селен-веб-драйвер
  • селен
  • селен-тестирование

Вы пропустили один-… «—инкогнито» ПОДРОБНЕЕ

ответил 13 августа 2018 г. в селене к Самарпит • 5 910 баллов • 2277 просмотров

  • селен-веб-драйвер
  • селен
  • селен-тестирование

Лучший способ справиться с этим элементом . .. ПОДРОБНЕЕ

ответил 10 апр. 2018 г. в селене к нсв999 • 5 500 баллов • 10 581 просмотр

  • селен-веб-драйвер
  • селен
  • селен-тестирование
  • селен-java

включить доверенное соединение в Internet Explorer с помощью … ПОДРОБНЕЕ

ответил 31 августа 2020 г. в селене к Шри • 3190 баллов • 7 949 просмотров

  • селен-веб-драйвер
  • селен
  • селен-тестирование
  • селен-java

Чтобы разрешить или заблокировать уведомление, войдите с помощью Selenium, и вам необходимо … ПОДРОБНЕЕ

ответил 11 мая 2018 г. в селене к Самарпит • 5 910 баллов • 5775 просмотров

  • селен-веб-драйвер
  • селен
  • селен-тестирование
  • селен-java

xpath бывает двух типов. 1) Абсолютный XPath: /html/b . .. ПОДРОБНЕЕ

ответил 3 сентября 2020 г. в селене к Шри • 3190 баллов • 6977 просмотров

  • селен-веб-драйвер
  • селен
  • селен-тестирование
  • селен-java

Этот код ниже работает для меня в … ПОДРОБНЕЕ

ответил 14 декабря 2020 г. в селене к Гитика • 65 910 баллов • 97 451 просмотр

  • селен-веб-драйвер
  • селен
  • селен-тестирование

Профилирование пользователей — это термин, используемый для … ПОДРОБНЕЕ

ответил 24 декабря 2018 г. в селене к Шуводип • 25 239 просмотров

  • селен
  • селен-тестирование
  • селен-java
  • селен-веб-драйвер
  • Что такое курс селена? 15 марта 2022 г.
  • SEO: Whois-сервер, работающий с доменами .SE? 19 февраля 2022 г.
  • Преобразование времени из EST в UTC в Excel 18 февраля 2022 г.
  • как найти элемент в селене 7 февраля 2022 г.
  • как узнать селен? 7 февраля 2022 г.
  • Все категории
  • ЧатGPT (11)
  • Апач Кафка (84)
  • Апач Спарк (596)
  • Лазурный (145)
  • Большие данные Hadoop (1,907)
  • Блокчейн (1673)
  • С# (141)
  • С++ (271)
  • Консультирование по вопросам карьеры (1060)
  • Облачные вычисления (3469)
  • Кибербезопасность и этичный взлом (162)
  • Аналитика данных (1266)
  • База данных (855)
  • Наука о данных (76)
  • DevOps и Agile (3608)
  • Цифровой маркетинг (111)
  • События и актуальные темы (28)
  • IoT (Интернет вещей) (387)
  • Джава (1247)
  • Котлин (8)
  • Администрирование Linux (389)
  • Машинное обучение (337)
  • Микростратегия (6)
  • PMP (423)
  • Power BI (516)
  • Питон (3193)
  • РПА (650)
  • SalesForce (92)
  • Селен (1569)
  • Тестирование программного обеспечения (56)
  • Таблица (608)
  • Таленд (73)
  • ТипСкрипт (124)
  • Веб-разработка (3002)
  • Спросите нас о чем угодно! (66)
  • Другие (2231)
  • Мобильная разработка (395)
  • Пользовательский интерфейс UX-дизайн (24)

Подпишитесь на нашу рассылку и получайте персональные рекомендации.

Уже есть учетная запись? .

javascript — отладка с помощью firebug или google chrome

спросил

8 лет, 6 месяцев назад

Изменено 8 лет, 6 месяцев назад

Просмотрено 223 раза

Мне нужно отладить мой javascript с помощью firebug или google chrome, но мой javascript находится в том же файле, что и html, когда я пытаюсь найти свой код javascript, я не знаю, где он, потому что он не находится в конкретном файле, в котором он находится. тот же файл с моим html, если я использую отладчик firebug или google chrome, я нахожу вкладку script, но затем я не знаю, в каком файле находится мой javascript, потому что его нет в файле javascript, как я могу найти свой javascript для отладки ?

Проблема в том, что я использую ASP. MVC, и у меня есть только одно представление и много частичных представлений, которые я помещаю в представление, представление имеет боковое меню, когда кто-то щелкает параметр в боковом меню, загружается одно частичное представление рядом с боковым меню, поэтому в этом частичном представлении есть html и javascript, но этот новый javascript в частичном представлении не найден для меня в firebug или google chrome devtools, потому что отображается только первый html и скрипт для представления и код частичного представление не отображается в этих инструментах, потому что этот код был вставлен динамически, и Firebug не обновил его.

Какое может быть решение? Спасибо.

  • javascript
  • asp.net-mvc
  • firebug

Вы можете узнать ошибку в какой строке. Посмотрите здесь

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

1

Перейти по URL-адресу. Например, на этой странице я могу поставить точку останова в файле «отладка с помощью firebug или google-chrome». Я считаю, что Google Chrome работает аналогично.

Кроме того, они отсортированы по доменам, что должно помочь вам найти файл URL.

Встроенный отладчик Firefox (кнопка Главного меню > Разработчик > Отладчик или CTRL+SHIFT+S) выводит список всех файлов, содержащих загруженные скрипты, на левой боковой панели «Источники». Он содержит даже html-файлы, если они содержат тег