Menu programisty przeglądarki Firefox zawiera narzędzia do sprawdzania stron, wykonywania dowolnego kodu JavaScript oraz przeglądania żądań HTTP i innych komunikatów. Firefox 10 dodał zupełnie nowe narzędzie Inspector i zaktualizował Brudnopis.
Nowe funkcje programu Firefox dla programistów internetowych w połączeniu z niesamowitymi dodatkami dla programistów internetowych, takimi jak Firebug i Web Developer Toolbar, sprawiają, że Firefox jest idealną przeglądarką dla programistów internetowych. Wszystkie narzędzia są dostępne pod Web Developer w menu Firefoksa.
Inspektor stron
Sprawdź określony element, klikając go prawym przyciskiem myszy i wybierając Sprawdzać (lub naciskając Q ). Możesz także uruchomić Inspektor z menu Web Developer.
U dołu ekranu zobaczysz pasek narzędzi, za pomocą którego możesz sterować inspektorem. Wybrany przez Ciebie element zostanie podświetlony, a inne elementy na stronie - wyszarzone.
Jeśli chcesz wybrać nowy element, kliknij Sprawdzać na pasku narzędzi, umieść kursor myszy nad stroną i kliknij element. Firefox podświetla element pod kursorem.
Możesz przechodzić między elementami nadrzędnymi i podrzędnymi, klikając menu nawigacyjne na pasku narzędzi.
Inspektor HTML
Kliknij HTML aby zobaczyć kod HTML aktualnie wybranego elementu.
Inspektor HTML umożliwia rozwijanie i zwijanie znaczników HTML, ułatwiając ich wizualizację na pierwszy rzut oka. Jeśli chcesz zobaczyć kod HTML strony w płaskim pliku, możesz wybrać Zobacz stronę źródłową z menu Web Developer.
Inspektor CSS
Kliknij Styl aby zobaczyć reguły CSS zastosowane do wybranego elementu.
Jest też panel właściwości CSS - przełączaj się między nimi, klikając Zasady i Nieruchomości guziki. Aby pomóc Ci znaleźć określone właściwości, panel właściwości zawiera pole wyszukiwania.
Możesz edytować CSS elementu w locie z panelu Reguły. Odznacz dowolne pola wyboru, aby dezaktywować regułę, kliknij tekst, aby zmienić regułę, lub dodaj własne reguły do elementu u góry panelu. Tutaj dodałem font-weight: pogrubienie; Reguła CSS powodująca pogrubienie tekstu elementu.
Brudnopis JavaScript
Brudnopis również otrzymał aktualizację w przeglądarce Firefox 10 i teraz zawiera podświetlanie składni. Możesz wpisać kod JavaScript, aby uruchomić się na bieżącej stronie.
Gdy już to zrobisz, kliknij Wykonać menu i wybierz Biegać. Kod działa w bieżącej karcie.
Konsola internetowa
Konsola internetowa zastępuje starą konsolę błędów, która jest przestarzała i zostanie usunięta w przyszłej wersji przeglądarki Firefox.
Konsola wyświetla cztery różne typy komunikatów, których widoczność można przełączać - żądania sieciowe, komunikaty o błędach CSS, komunikaty o błędach JavaScript i komunikaty od programistów WWW.
Jaka jest wiadomość dla programistów internetowych? Jest to komunikat drukowany do obiektu window.console. Na przykład moglibyśmy uruchomić window.console.log („Hello World”); Kod JavaScript w brudnopisie, aby wydrukować wiadomość programisty na konsoli. Programiści sieci Web mogą zintegrować te wiadomości z kodem JavaScript, aby ułatwić debugowanie.
Odśwież stronę, a zobaczysz wygenerowane żądania sieciowe i inne komunikaty.
Użyj pola wyszukiwania, aby odfiltrować wiadomości; kliknij prośbę, jeśli chcesz zobaczyć więcej szczegółów.
Od wersji Firefox 10 konsola internetowa może współpracować z inspektorem stron. Zmienna $ 0 reprezentuje aktualnie zaznaczony obiekt w inspektorze. Na przykład, jeśli chcesz ukryć aktualnie wybrany obiekt, możesz uruchomić $ 0.style.display = "none" w konsoli.
Jeśli chcesz dowiedzieć się więcej o korzystaniu z konsoli i jej wbudowanych funkcjach, zapoznaj się z Strona konsoli internetowej w witrynie internetowej Mozilla Developer Network.
Uzyskaj więcej narzędzi
Plik Uzyskaj więcej narzędzi przeniesie Cię do kolekcji dodatków Web Developer Toolbox w witrynie Mozilla Add-Ons. Zawiera niektóre pliki najlepsze dodatki dla twórców stron internetowych , w tym Firebug i Web Developer Toolbar.
Jeśli używasz Firefoksa od kilku lat, być może pamiętasz Inspektora DOM. Od tamtego czasu zintegrowane narzędzia programistyczne Firefoksa przeszły długą drogę.
