From de5c456ebded0e038adbf23db34cc290c8829180 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:24 +0100 Subject: unslug pl: move --- files/pl/tools/about_colon_debugging/index.html | 207 ++++++++++++++++++++ files/pl/tools/browser_toolbox/index.html | 40 ++++ files/pl/tools/debugger/how_to/index.html | 11 ++ files/pl/tools/debugger/index.html | 81 ++++++++ files/pl/tools/index.html | 211 +++++++++++++++++++++ files/pl/tools/page_inspector/how_to/index.html | 13 ++ .../how_to/open_the_inspector/index.html | 15 ++ files/pl/tools/page_inspector/index.html | 58 ++++++ files/pl/tools/page_inspector/ui_tour/index.html | 108 +++++++++++ files/pl/tools/performance/flame_chart/index.html | 103 ++++++++++ files/pl/tools/performance/index.html | 97 ++++++++++ files/pl/tools/storage_inspector/index.html | 206 ++++++++++++++++++++ files/pl/tools/tools_toolbox/index.html | 113 +++++++++++ files/pl/tools/validators/index.html | 45 +++++ files/pl/tools/view_source/index.html | 82 ++++++++ 15 files changed, 1390 insertions(+) create mode 100644 files/pl/tools/about_colon_debugging/index.html create mode 100644 files/pl/tools/browser_toolbox/index.html create mode 100644 files/pl/tools/debugger/how_to/index.html create mode 100644 files/pl/tools/debugger/index.html create mode 100644 files/pl/tools/index.html create mode 100644 files/pl/tools/page_inspector/how_to/index.html create mode 100644 files/pl/tools/page_inspector/how_to/open_the_inspector/index.html create mode 100644 files/pl/tools/page_inspector/index.html create mode 100644 files/pl/tools/page_inspector/ui_tour/index.html create mode 100644 files/pl/tools/performance/flame_chart/index.html create mode 100644 files/pl/tools/performance/index.html create mode 100644 files/pl/tools/storage_inspector/index.html create mode 100644 files/pl/tools/tools_toolbox/index.html create mode 100644 files/pl/tools/validators/index.html create mode 100644 files/pl/tools/view_source/index.html (limited to 'files/pl/tools') diff --git a/files/pl/tools/about_colon_debugging/index.html b/files/pl/tools/about_colon_debugging/index.html new file mode 100644 index 0000000000..8ed93e0d15 --- /dev/null +++ b/files/pl/tools/about_colon_debugging/index.html @@ -0,0 +1,207 @@ +--- +title: 'about:debugging' +slug: 'Narzędzia/about:debugging' +translation_of: 'Tools/about:debugging' +--- +

Zakładka about:debugging gromadzi narzędzia developerskie Firefoxa i pozwala używać ich do testowania i debugowania wielu celów (dodatków). Na chwilę obecną wspiera trzy główne rodzaje celów: dodatki niewymagające restartu przeglądarki, karty (zakładki) i workersy (zadania w tle).

+ +

Otwieranie zakładki about:debugging

+ +

Zakładkę about:debugging można otworzyć na kilka sposobów:

+ + + +

Gdy otworzy się zakładka about:debugging, po lewej stronie zobaczysz sidebara umożliwiającego przełączanie pomiędzy dwoma widokami: jednym dla dodatków, drugim dla zadań w tle (Workers).

+ +

Dodatki

+ +
+

Sekcja Dodatki w zakładce about:debugging obsługuje tylko dodatki niewymagające restartu przeglądarki, w tym basic bootstrapped extensions (niewspierane od FF > 57) , Add-on SDK Add-ons i WebExtensions (jedyne wspierane od FF > 57) .

+
+ +

Ta sekcja pozwala zrobić dwie rzeczy:

+ + + +

+ +

Podłączanie Add-on Debuggera

+ +
+

Należy zauważyć, że obecnie do debugowania WebExtensions zaleca się korzystanie z Narzędzi Przeglądarki (Browser Toolbox) zamiast Add-on Debuggera. Szczegóły są opisane w artykule Debugowanie WebExtensions.

+
+ +

Sekcja Dodatki w zakładce about:debugging wyświetla wszystkie zainstalowane dodatki niewymagające restartu przeglądarki (lista może zawierać dodatki preinstalowane razem z Firefoxem). Przy każdym wyświetlonym dodatku znajduje się przycisk z etykietą "Debuguj".

+ +

Jeżeli ww. przycisk jest nieaktywny należy zaznaczyć checkboxa "Debugowanie dodatków." na górze sekcji.

+ +

Gdy klikniesz w przycisk "Debuguj" zobaczysz okno dialogowe z pytaniem o akceptację przychodzących połączeń. Kliknij "OK", a Add-on Debugger włączy się w oddzielnym oknie. Czasami okno debuggera może być schowane za głównym oknem Firefoxa.

+ +

{{EmbedYouTube("tGGcA3bT3VA")}}

+ +

By zobaczyć co możesz zrobić z Add-on Debuggerem zajrzyj do artykułu Add-on Debugger.

+ +
+

Przycisk "Włącz debugowanie" zmienia wartości ustawień devtools.chrome.enabled i devtools.debugger.remote-enabled. Obie opcje muszą mieć wartość true, żeby debugowanie było dostępne. Zaznaczenie checkboxa ustawia obie wartości na true, odznaczenie go ustawia obie wartości na false.

+ +

Można również zmodyfikować ustawienia bezpośrednio w about:config lub zaznaczając „Narzędzia debugowania chrome przeglądarki i dodatków” i „Debugowanie zdalne” w Ustawieniach Narzędzia dla programistów .

+
+ +

Ładowanie dodatku tymczasowego

+ +

Przycisk "Wczytaj tymczasowy dodatek" pozwala wczytać jakikolwiek dodatek (niewymagający restartu) z katalogu na dysku. Wystarczy kliknąć przycisk, wybrać folder zawierający pliki dodatku i zaznaczyć dowolny plik w tym katalogu. Dodatek tymczasowy będzie wyświetlany pod etykietą "Tymczaowe rozszerzenia".

+ +

Nie musisz pakować ani podpisywać dodatku. Będzie on zainstalowany do następnego restartu Firefoxa.

+ +

{{EmbedYouTube("sAM78GU4P34")}}

+ +

Największymi zaletami tej metody w porównaniu z instalacją dodatku z XPI są:

+ + + +

Aktualizacja dodatku tymczasowego

+ +

Co się dzieje jeśli zainstalujesz dodatek tym sposobem i zaktualizujesz jego pliki?

+ +

Przed Firefoxem 48

+ + + +
+

Należy pamiętać, że przed Firefox 48, ładowanie dodatek ponownie naciskając przycisk „Załaduj Temporary add-on” bez ponownego uruchamiania Firefox nie działa .

+
+ +

Firefox 48 r

+ + + +

Firefox 48 z roku:

+ + + +
+

Zauważ, że w Firefoksie 49 r, przycisk Odśwież jest dostępna tylko dla tymczasowych dodatków. zostanie ona wyłączona dla wszystkich innych dodatków.

+
+ +

Tabs

+ +

Firefox 49 roku, strona jest dostępna w Tabs about:debugging- to zapewnia pełną listę wszystkich debuggable otwartych kart w bieżącej instancji Firefox.

+ +

+ +

Każdy wpis ma zakładka Debug przycisk obok niego - po kliknięciu, to otworzy się zestaw narzędzi specyficznych dla tej zakładki, co pozwala na debugowanie że zawartość Tab.

+ +

+ +
+

Zauważ, że ta funkcja nie jest bezpośrednio przydatna do debugowania kart pulpitu - można otworzyć zestaw narzędzi do debugowania kartę już dosyć łatwo - ale to będzie znacznie bardziej przydatna, gdy about:debuggingzacznie obsługiwać zdalne debugowanie, a ta strona może zacząć notować kartach do debugowania na urządzeniu mobilnym przeglądarek symulatorów itp Zobacz {{bug (1212802)}} za ostatni na tej pracy.

+
+ +

Pracownicy

+ +

Strona Pracownicy pokazuje swoim pracownikom, podzielone w następujący sposób:

+ + + +

Można podłączyć narzędzi programistycznych do każdego pracownika, a także wysyłać powiadomień push do pracowników usług.

+ +

+ +

Pracownik serwisu stan

+ +

Z Firefoksa 52, lista pracowników służby pokazuje stan pracownika serwisu w jego cyklu życia . Trzy stany wyróżnia się:

+ + + +

+ +
+

Ta sekcja używa prostego ServiceWorker demo, którego gospodarzem w https://serviceworke.rs/push-simple/ .

+
+ +

pracownicy debugowania

+ +

Dla pracownika serwisu, jeśli jest już uruchomiony, zobaczysz dwa przyciski obok niej, oznaczony „Debug” i „push”. Jeśli nie jest już uruchomiony, zobaczysz jeden przycisk, oznaczony „Start”: Kliknij, aby rozpocząć pracownika serwisu.

+ +

Kliknięcie „Debug” łączy debugger JavaScript i konsolę do tego pracownika. Można ustawić punkty przerwania, krok za pomocą kodu, obserwować zmienne, ocenić kod i tak dalej:

+ +

{{EmbedYouTube("Z8ax79sHWDU")}}

+ +

pracownicy rejestrowanie

+ +

Po pierwsze, nie będzie widać żadnych pracowników wymienionych poniżej pracownicy usług lub udostępnionych Pracowników . Tak szybko, jak pracownik jest zarejestrowany, wykaz jest aktualizowany:

+ +

{{EmbedYouTube("wy4kyWFhFF4")}}

+ +
+

Przed Firefox 47, pracownicy usług zostały pokazane tylko wtedy, gdy zostały one faktycznie działa.

+
+ +

pracownicy usług Wyrejestrowywanie

+ +
+

Nowy Firefox 48.

+
+ +

Uruchamianie w Firefoksie 48, zobaczysz link o nazwie „wyrejestrować” obok każdego zarejestrowanego pracownika serwisu:

+ +

+ +

Kliknij link, aby wyrejestrować pracownika serwisu.

+ +

Wysyłanie zdarzeń wypychania do pracowników usług

+ +
+

Wysyłanie zdarzeń wypychania w about: debugowanie jest nowego w Firefoksie 47.

+
+ +

Do debugowania powiadomień Push, można ustawić punkt przerwania w wydarzeniu Push słuchacza. Jednakże, można również debugować powiadomienia push lokalnie, bez potrzeby serwera. Wystarczy kliknąć przycisk „push”, aby wysłać zdarzenie Push pracownikowi serwisu:

+ +

{{EmbedYouTube ( "62SkLyA-ZnO")}}

+ +

pracownicy usług nie są kompatybilne

+ +
+

Firefox 49+ komunikat ostrzegawczy zostanie wyświetlony w sekcji Obsługa Pracowników strony pracowników, jeżeli pracownicy usług są niezgodne z bieżącej konfiguracji przeglądarki, a zatem nie mogą być używane lub pozbawione błędów.

+ +

+
+ +

pracownicy usług mogą być niedostępne z kilku powodów:

+ + diff --git a/files/pl/tools/browser_toolbox/index.html b/files/pl/tools/browser_toolbox/index.html new file mode 100644 index 0000000000..b5a4fa88ce --- /dev/null +++ b/files/pl/tools/browser_toolbox/index.html @@ -0,0 +1,40 @@ +--- +title: Browser Toolbox +slug: Narzędzia/Browser_Toolbox +translation_of: Tools/Browser_Toolbox +--- +

The Browser Toolbox enables you to debug add-ons and the browser's own JavaScript code rather than just web pages like the normal Toolbox.  The Browser Toolbox's context is the whole browser rather than just single page on a single tab.

+ +

Note:  If you want to debug a specific add-on that is restartless or SDK-based then try the Add-on Debugger.  Use the Browser Toolbox for add-ons that are neither.

+ +

Enabling the Browser Toolbox 

+ +
+

The Browser Toolbox is not enabled by default.  To enable it you need to check the settings "Enable chrome and addon debugging" and "Enable remote debugging".

+ +

To do this, open the Developer Tools Toolbox's Settings, go to the section "Advanced Settings", and check the settings "Enable chrome and addon debugging" and "Enable remote debugging".

+
+ +

Opening the Browser Toolbox

+ +

Open the Browser Toolbox through the menu button new fx menu and the menu items "Developer" then "Browser Toolbox". 

+ +

Click the menu item and you'll be presented with a dialog like this (this can be removed by setting the devtools.debugger.prompt-connection property to false):

+ +

Click OK, and the Browser Toolbox will open in its own window:

+ +

You'll see, and be able to debug, all the JavaScript files loaded by the browser itself and by any add-ons that are running. Altogether you will have access to the following developer tools:

+ + + +

Debugging chrome: and about: pages

+ +

From Firefox 37 onwards, you can debug chrome: and about: pages using the normal Debugger, just as if they were ordinary content pages.

diff --git a/files/pl/tools/debugger/how_to/index.html b/files/pl/tools/debugger/how_to/index.html new file mode 100644 index 0000000000..0ee1b834a1 --- /dev/null +++ b/files/pl/tools/debugger/how_to/index.html @@ -0,0 +1,11 @@ +--- +title: How to +slug: Narzędzia/Debugger/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Debugger/How_to +--- +

These articles describe how to use the debugger.

+ +

{{ ListSubpages () }}

diff --git a/files/pl/tools/debugger/index.html b/files/pl/tools/debugger/index.html new file mode 100644 index 0000000000..b81218619f --- /dev/null +++ b/files/pl/tools/debugger/index.html @@ -0,0 +1,81 @@ +--- +title: Debugger +slug: Narzędzia/Debugger +translation_of: Tools/Debugger +--- +

 JavaScript Debugger pozwala przejść przez kod JavaScript i spawdzić lub zmienić jego stan, aby pomóc wyśledzić błędy.

+ +

Można go używać do debugowania kodu. Działa lokalnie w Firefoksie lub pracuje zdalnie, na przykład w urządzeniu Firefox OS lub w przeglądarce Firefox na Androida. Zobacz zdalne debugowanie by nauczyć się jak przełączyć debuggera do trybu zdalnego.

+ +

{{EmbedYouTube("sK8KU8oiF8s")}}

+ +
+

Użytkownik interfejsu Tour

+ +

Aby odnaleźc drogę debuggera, oto szybkie zwiedzanie UI.

+ +
+

Jak to zrobić?

+ +

Aby dowiedzieć się co można zrobić z użyciem debuggera, zobacz nastepujacy przewodnik:

+ +
+
+
+
Otworzenie debuggera
+
 
+
Ustawianie punktu przerwania
+
 
+
Wyłączenie przerwania
+
 
+
Krok za pomocą kodu
+
 
+
Break on a DOM event
+
 
+
Highlight and inspect DOM nodes
+
 
+
Pretty-print a minified file
+
 
+
+
+ +
+
+
Szukanie i filtry
+
 
+
Set a conditional breakpoint
+
 
+
Examine, modify, and watch variables
+
 
+
Use a source map
+
 
+
Black box a source
+
 
+
Debug eval sources
+
 
+
Access debugging in add-ons
+
 
+
+
+
+ +
+

Referencje

+ +
+
+
+
Keyboard shortcuts
+
 
+
+
+ +
+
+
Settings
+
 
+
+
+
+ +

 

diff --git a/files/pl/tools/index.html b/files/pl/tools/index.html new file mode 100644 index 0000000000..8f9560929a --- /dev/null +++ b/files/pl/tools/index.html @@ -0,0 +1,211 @@ +--- +title: Narzędzia dla programistów Firefox +slug: Narzędzia +tags: + - Narzędzia +translation_of: Tools +--- +
{{ToolsSidebar}}
+ +

Examine, edit, and debug HTML, CSS, and JavaScript on the desktop and on mobile.

+ +

If you are looking for information on using the web developer tools available in Firefox, you've come to the right place — this page provides links to detailed information on all of the core tools and additional tools, and further information such as how to connect to and debug Firefox for Android, how to extend the devtools, and how to debug the browser as a whole.

+ +

Please explore the links found in the sidebar, and further down the page. If you have any feedback or questions about the devtools, send us messages on our mailing list or IRC channel (see the community links near the bottom of the page). If you have any feedback or questions specifically about the documentation, the MDN discourse is a good place to post.

+ +
+

Note: If you are just getting started with web development and using developer tools, our learning web development docs will help you — see Getting started with the Web and What are browser developer tools? for good starting points.

+
+ +

The Core Tools

+ +

You can open the Firefox Developer Tools from the menu by selecting Tools > Web Developer > Toggle Tools or use the keyboard shortcut Ctrl + Shift + I or F12 on Windows and Linux, or Cmd + Opt + I on macOS.

+ +

The ellipsis menu on the right-hand side of Developer Tools, contains several commands that let you perform actions or change tool settings.

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + +
This button only appears when there are multiple iframes on a page. Click it to display a list of the iframes on the current page and select the one with which you want to work.
Click this button to take a screenshot of the current page. (Note: This feature is not turned on by default and must be enabled in settings before the icon will appear.)
Toggles Responsive Design Mode.
Opens the menu that includes docking options, the ability to show or hide the split console, and Developer Tools settings. The menu also includes links to the documentation for Firefox Web Tools and the Mozilla Community.
Closes the Developer Tools
+ +
+
+

Page Inspector

+ +

The all-new Inspector panel in Firefox 57.

+ +

View and edit page content and layout. Visualise many aspects of the page including the box model, animations, and grid layouts.

+
+ +
+

Web Console

+ +

The all-new Console in Firefox 57.

+ +

See messages logged by a web page and interact with the page using JavaScript.

+
+
+ +
+
+

JavaScript Debugger

+ +

The all-new Firefox 57 Debugger.html

+ +

Stop, step through, examine, and modify the JavaScript running in a page.

+
+ +
+

Network Monitor

+ +

The Network panel in Firefox 57 DevTools.

+ +

See the network requests made when a page is loaded.

+
+
+ +
+
+

Performance Tools

+ +

Performance Tools in Firefox 57 Developer Tools

+ +

Analyze your site's general responsiveness, JavaScript, and layout performance.

+
+ +
+

Responsive Design Mode

+ +

Responsive Design mode in Firefox 57.

+ +

See how your website or app will look and behave on different devices and network types.

+
+
+ +
+
+

Accessibility inspector

+ +

Performance Tools in Firefox 57 Developer Tools

+ +

Provides a means to access the page's accessibility tree, allowing you to check what's missing or otherwise needs attention.

+
+ +
+
+ +
+

Note: The collective term for the UI inside which the DevTools all live is the Toolbox.

+
+ +

More Tools

+ +

These developer tools are also built into Firefox. Unlike the "Core Tools" above, you might not use them every day.

+ +
+
+
Memory
+
Figure out which objects are keeping memory in use.
+
Storage Inspector
+
Inspect cookies, local storage, indexedDB, and session storage present in a page.
+
DOM Property Viewer
+
Inspect the page's DOM properties, functions, etc.
+
Eyedropper
+
Select a color from the page.
+
Scratchpad
+
A text editor built into Firefox that lets you write and execute JavaScript.
+
Style Editor
+
View and edit CSS styles for the current page.
+
Taking screenshots
+
Take a screenshot of the entire page or of a single element.
+
Measure a portion of the page
+
Measure a specific area of a web page.
+
Rulers
+
Overlay horizontal and vertical rulers on a web page
+
+
+ +
+
+

+ +

For the latest developer tools and features, try Firefox Developer Edition.

+ +

Download Firefox Developer Edition

+
+ +
+
+ +

Connecting the Developer Tools

+ +

If you open the developer tools using keyboard shortcuts or the equivalent menu items, they'll target the document hosted by the currently active tab. But you can attach the tools to a variety of other targets, too, both within the current browser and in different browsers or even different devices.

+ +
+
+
about:debugging
+
Debug add-ons, content tabs, and workers running in the browser.
+
Connecting to Firefox for Android
+
Connect the developer tools to an instance of Firefox running on an Android device.
+
Connecting to iframes
+
Connect the developer tools to a specific iframe in the current page.
+
Connecting to other browsers
+
Connect the developer tools to Chrome on Android and Safari on iOS.
+
+
+ +

Debugging the browser

+ +

By default, the developer tools are attached to a web page or web app. But you can also connect them to the browser as a whole. This is useful for browser and add-on development.

+ +
+
+
Browser Console
+
See messages logged by the browser itself and by add-ons, and run JavaScript code in the browser's scope.
+
Browser Toolbox
+
Attach the Developer Tools to the browser itself.
+
+
+ +

Extending the devtools

+ +

For information on extending the Firefox DevTools, see Extending the developer tools over in the Browser Extensions section of MDN.

+ +

Migrating from Firebug

+ +

Firebug has come to the end of its lifespan (see Firebug lives on in Firefox DevTools for details of why), and we appreciate that some people will find migrating to another less familiar set of DevTools to be challenging. To ease a transition from Firebug to the Firefox developer tools, we have written a handy guide — Migrating from Firebug.

+ +

Contribute

+ +

If you want to help improve the developer tools, these resources will get you started.

+ +
+
+
Get Involved
+
Our developer documentation explains how to get involved.
+
bugs.firefox-dev.tools
+
A tool helping to find bugs to work on.
+
+
diff --git a/files/pl/tools/page_inspector/how_to/index.html b/files/pl/tools/page_inspector/how_to/index.html new file mode 100644 index 0000000000..29373ef1b7 --- /dev/null +++ b/files/pl/tools/page_inspector/how_to/index.html @@ -0,0 +1,13 @@ +--- +title: How to +slug: Narzędzia/Page_Inspector/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Page_Inspector/How_to +--- +

Links for various HOW TO's can be found here. These links describe in depth the HOW TO techniques.

+ +

{{ ListSubpages () }}

+ +

 

diff --git a/files/pl/tools/page_inspector/how_to/open_the_inspector/index.html b/files/pl/tools/page_inspector/how_to/open_the_inspector/index.html new file mode 100644 index 0000000000..4d4b025c45 --- /dev/null +++ b/files/pl/tools/page_inspector/how_to/open_the_inspector/index.html @@ -0,0 +1,15 @@ +--- +title: Otwórz Inspektora +slug: Narzędzia/Page_Inspector/How_to/Open_the_Inspector +translation_of: Tools/Page_Inspector/How_to/Open_the_Inspector +--- +

Istnieją dwie główne ścieżki do otworzenia Inspektora:

+ + + +

Inspektor pojawi się w oknie przeglądarki:

+ +

Aby odnaleźć się w Inspektorze, zobacz Podróż przez UI.

diff --git a/files/pl/tools/page_inspector/index.html b/files/pl/tools/page_inspector/index.html new file mode 100644 index 0000000000..336489b782 --- /dev/null +++ b/files/pl/tools/page_inspector/index.html @@ -0,0 +1,58 @@ +--- +title: Inspektor Stron +slug: Narzędzia/Page_Inspector +translation_of: Tools/Page_Inspector +--- +
+

Użyj Inspektora Stron, aby badać i modyfikować HTML i CSS na stronie.

+ +

Możesz badać strony załadowane w lokalnej kopii programu Firefox oraz za pomocą zdalnego obiektu - takiego jak urządzenie z Firefox OS, bądź też program Firefox dla Androida. Zobacz zdalne debugowanie, by dowiedzieć się, jak połączyć narzędzia deweloperskie ze zdalnym obiektem.

+ +
+

Podróż przez Interfejs Użytkownika

+ +

Aby odnaleźć się w Inspektorze, zobacz szybką podróż przez UI.

+ +
+

How-to

+ +

Aby dowiedzieć się, co możesz robić za pomocą Inspektora, zobacz następujące przewodniki:

+ +
+ +
+ +
+

Odniesienie

+ +
+ +
+
+ +
+
+
+
 
+
 
+
+
+
diff --git a/files/pl/tools/page_inspector/ui_tour/index.html b/files/pl/tools/page_inspector/ui_tour/index.html new file mode 100644 index 0000000000..c3c2375155 --- /dev/null +++ b/files/pl/tools/page_inspector/ui_tour/index.html @@ -0,0 +1,108 @@ +--- +title: Przewodnik przez UI +slug: Narzędzia/Page_Inspector/Przewodnik_przez_UI +tags: + - Inspektor + - Narzędzia + - Przewodnik +translation_of: Tools/Page_Inspector/UI_Tour +--- +

Ten artykuł jest szybkim wprowadzeniem do głównych sekcji Interfejsu Użytkownika (UI) Inspektora Stron.

+ +

Obejmuje on trzy komponenty najwyższego poziomu UI Inspektora:

+ + + +

Ten przewodnik jest celowo tak krótki, jak to możliwe. Odnosi się on do różnych innych przewodników How-To dla szczegółów, jak pracować z Inspektorem.

+ +

Przycisk "Zaznacz element"

+ +

Inspektor podaje Ci dokładne informacje o aktualnie zaznaczonym elemencie. Przycisk "Zaznacz element" jest jedną z możliwości, które pozwalają zaznaczyć element do sprawdzenia:

+ +

+ +

Pamiętaj, że jest to część tzw. main toolbox toolbar, więc przycisk ten jest dostępny z dowolnego narzędzia, nie tylko z Inspektora.

+ +

Aby dowiedzieć się, jak zaznaczyć element, zobacz przewodnik o zaznaczaniu elementu.

+ +

Sekcja HTML

+ +

Inspektor jest podzielony na dwie części. Lewa część Inspektora to sekcja HTML (na obrazku: HTML pane)

+ +

+ +

Aby dowiedzieć się więcej o budowie sekcji HTML, zobacz przewodnik o badaniu i edytowaniu HTML.

+ +

Sekcja CSS

+ +

Prawa część Inspektora to sekcja CSS (na obrazku: CSS pane):

+ +

Sekcja CSS jest podzielona 5 perspektyw:

+ + + +

Użyj zakładek w górnej części sekcji CSS, aby przełączać się pomiędzy różnymi widokami.

+ +

Widok Reguł

+ +

Widok Reguł wyświetla wszystkie reguły pasujące do zaznaczonego elementu, w kolejności od najbardziej do najmniej specyficznych:

+ +

+ +

Zobacz Badaj i edytuj CSS dla dalszych szczegółów.

+ +

Widok Wyliczony

+ +

Widok Wyliczony pokazuje całe wyliczone CSS dla zaznaczonego elementu.

+ +

+ +

Zobacz Badaj i edytuj CSS dla dalszych szczegółów.

+ +

Widok Czcionek

+ +
+

Zaczynając od Firefoksa 47, widok Czcionek jest domyślnie wyłączony. Pracujemy nad bardziej funkcjonalnym zamiennikiem.

+ +

Na tą chwilę, jeśli chcesz zobaczyć widok Czcionek, odwiedź about:config, znajdź preferencję devtools.fontinspector.enabled i ustaw ją na true.

+
+ +

Widok Czcionek pokazuje wszystkie czcionki na stronie wraz z przykładami ich użycia, które można edytować.

+ +

+ +

Odwiedź stronę Zobacz Czcionki dla dalszych szczegółów.

+ +

Widok Modelu Pudełkowego

+ +

Widok Modelu Pudełkowego pokazuje edytowalny widok modelu pudełkowego zaznaczonego elementu.

+ +

+ +

Zabacz Badaj i edytuj model pudełkowy dla dalszych szczegółów.

+ +

Widok Animacji

+ +

Widok Animacji pozwala zobaczyć szczegóły dowolnej animacji zastosowanej w zaznaczonym elemencie, oraz udostępnia kontroler do ich wstrzymania:

+ +

 

+ +

+ +

Zobacz Pracuj z animacjami dla dalszych szczegółów.

+ +

Pokaż/ukryj sekcję CSS

+ +

Począwszy od Firefoksa 40 w pasku narzędzi istnieje przycisk, za pomocą którego możesz pokazać lub ukryć sekcję CSS:

+ +

diff --git a/files/pl/tools/performance/flame_chart/index.html b/files/pl/tools/performance/flame_chart/index.html new file mode 100644 index 0000000000..1edebd4d01 --- /dev/null +++ b/files/pl/tools/performance/flame_chart/index.html @@ -0,0 +1,103 @@ +--- +title: Flame Chart +slug: Narzędzia/Performance/Flame_Chart +translation_of: Tools/Performance/Flame_Chart +--- +
+

The Flame Chart shows you the state of the JavaScript stack for your code at every millisecond during the performance profile.

+ +

This gives you a way to know exactly which function was executing at any point during the recording, how long it ran for, and where it was called from.

+
+ +

The Call Tree and the Flame Chart are both used to analyze your site's JavaScript, and they both use the same data: a sample of the JavaScript engine's stack, taken periodically during the recording.

+ +

But while the Call Tree organizes this data to show you where your program is spending most time in aggregate across the recording, the Flame Chart uses it to show you when in the recording particular functions are executing. Essentially it shows you the state of the call stack at any given point during the recording.

+ +

Here's a screenshot showing the Flame Chart for a section of a profile:

+ +

+ +

First of all, you'll see that, in the recording overview pane, we've selected a small slice of the recording to view in the Flame Chart. The Flame Chart displays a lot of data, so to get readable results, it's usually necessary to zoom in.

+ +

In the Flame Chart view itself, along the X-axis is time. The screenshot above covers the period from 1435ms to a little past 1465ms. Along the Y-axis are the functions on the call stack at that point in time, with the top-level at the top, and the leaf function at the bottom. Functions are color-coded to make them easier to distinguish.

+ +

This gives you a way to know exactly which function was executing at any point during the recording, how long it ran for, and where it was called from.

+ +

Zooming and panning

+ +

To work effectively with the Flame Chart, you'll need to be able to navigate it. There are two main controls you can use to navigate the Flame Chart:

+ + + + + + + + + + + + +
Zoom: increase/decrease the selected portion of the complete profile that's displayed in the Flame Chart +

1) Mouse wheel up/down in the Flame Chart.

+ +

2) Trackpad 2 fingers up/down in the Flame Chart.

+
Pan: move the selected portion of the complete profile left and right +

1) Click and drag the selected portion in the recording overview pane.

+ +

2) Click and drag anywhere in the Flame Chart.

+
+ +

{{EmbedYouTube("BzfkBRFucp8")}}

+ +

An example

+ +

To see how the Flame Chart can reveal the behavior of your program, we'll look at a simple example. We'll use the same example as in the Call Tree page: a program that compares three different sorting algorithms. There's a separate page that gives an overview of this program's structure.

+ +

We'll use the same profile file as that used in the Call Tree page. In the call tree page, we figured out that the program call graph in that profile, and the associated sample count, looked like this:

+ +
sortAll()                         //    8
+
+    -> sort()                     //   37
+
+        -> bubbleSort()           // 1345
+
+            -> swap()             //  252
+
+        -> selectionSort()        //  190
+
+            -> swap()             //    1
+
+        -> quickSort()            //  103
+
+            -> partition()        //   12
+ +

First, we'll just select the whole section in which the program was active:

+ +

+ +

At the top, colored purple, is the sortAll() call, running throughout the program from start to finish. Underneath that, colored olive-green, are the calls it's making to sort(). Underneath that, like the teeth of a comb, are all the calls being made to each sorting algorithm.

+ +

Let's zoom in:

+ +

+ +

This slice is about 140 ms long, and shows us more details of the functions being called by sort(). The sort() code is just this:

+ +
function sort(unsorted) {
+  console.log(bubbleSort(unsorted));
+  console.log(selectionSort(unsorted));
+  console.log(quickSort(unsorted));
+}
+ +

The markers labeled "bubb..." and colored olive-green are presumably bubbleSort(). The ones colored plain green are presumably the other sort functions. Even at a glance, we can see that the bubble sort blocks are much wider (of a longer duration) than the others.

+ +

We can also see some functions being called from bubbleSort(), colored purple.

+ +

Let's zoom in one more time:

+ +

+ +

This slice is about 20ms long. We can see that the purple markers underneath bubbleSort() are the calls to swap(). If you counted them all, the Call Tree view tells us that you'd see 253 of them. All the ones in this zoom are underneath bubbleSort(), but according to the Call Tree view, the profile does contain one under selectionSort().

+ +

We can also see that two of the green markers are for selectionSort() and quickSort(), but we're also seeing calls to platform (Gecko) code in between our calls to the sorting functions. It seems very likely that this is from the console.log() calls in sort().

diff --git a/files/pl/tools/performance/index.html b/files/pl/tools/performance/index.html new file mode 100644 index 0000000000..346399027f --- /dev/null +++ b/files/pl/tools/performance/index.html @@ -0,0 +1,97 @@ +--- +title: Performance +slug: Narzędzia/Performance +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Performance +--- +

The Performance tool gives you insight into your site's general responsiveness, JavaScript and layout performance. With the Performance tool you create a recording, or profile, of your site over a period of time. The tool then shows you an overview of the things the browser was doing to render your site over the profile, and a graph of the frame rate over the profile.

+ +

You get four sub-tools to examine aspects of the profile in more detail:

+ + + +

{{EmbedYouTube("WBmttwfA_k8")}}

+ +
+

Getting started

+ +
+
+
+
UI Tour
+
+

To find your way around the Performance tool, here's a quick tour of the UI.

+
+
+
+ +
+
+
How to
+
Basic tasks: open the tool, create, save, load, and configure recordings
+
+
+
+ +
+

Components of the Performance tool

+ +
+
+
+
Frame rate
+
Understand your site's overall responsiveness.
+
Call Tree
+
Find bottlenecks in your site's JavaScript.
+
Allocations
+
See the allocations made by your code over the course of the recording.
+
+
+ +
+
+
Waterfall
+
Understand the work the browser's doing as the user interacts with your site.
+
Flame Chart
+
See which JavaScript functions are executing, and when, over the course of the recording.
+
 
+
+
+
+ +
+

Scenarios

+ +
+
+
+
Animating CSS properties
+
Uses the Waterfall to understand how the browser updates a page, and how animating different CSS properties can affect performance.
+
 
+
+
+ +
+
+
Intensive JavaScript
+
Uses the frame rate and Waterfall tools to highlight performance problems caused by long-running JavaScript, and how using workers can help in this situation.
+
+
+
+ +

 

+ +
+
+
 
+
+
+ +

 

diff --git a/files/pl/tools/storage_inspector/index.html b/files/pl/tools/storage_inspector/index.html new file mode 100644 index 0000000000..1638fcd918 --- /dev/null +++ b/files/pl/tools/storage_inspector/index.html @@ -0,0 +1,206 @@ +--- +title: Storage Inspector +slug: Narzędzia/Storage_Inspector +translation_of: Tools/Storage_Inspector +--- +
{{ToolsSidebar}}
+ +

The Storage Inspector enables you to inspect various types of storage that a web page can use. Currently it can be used to inspect the following storage types:

+ + + +

For the time being, the Storage Inspector only gives you a read-only view of storage. But we're working to let you edit storage contents in future releases.

+ +

Opening the Storage Inspector

+ +

You can open the Storage Inspector by selecting "Storage Inspector" from the Web Developer submenu in the Firefox Menu Panel (or Tools menu if you display the menu bar or are on macOS), or by pressing its Shift + F9 keyboard shortcut.

+ +

The Toolbox will appear at the bottom of the browser window, with the Storage Inspector activated. It's just called "Storage" in the Developer Toolbox.

+ +

+ +

Storage Inspector User Interface

+ +

The Storage Inspector UI is split into three main components:

+ + + +

+ +

Storage tree

+ +

The storage tree lists all the storage types that the Storage Inspector can inspect:

+ +

+ +

Under each type, objects are organized by origin. For cookies, the protocol does not differentiate the origin. For Indexed DB or local storage an origin is a combination of protocol + hostname. For example, "http://mozilla.org" and "https://mozilla.org" are two different origins so local storage items cannot be shared between them.

+ +

Under "Cache Storage", objects are organized by origin and then by the name of the cache:

+ +

+ +

IndexedDB objects are organized by origin, then by database name, then by object store name:

+ +

+ +

With the Cookies, Local Storage, and Session Storage types, there's only one level in the hierarchy, so stored items are listed directly under each origin:

+ +

+ +

You can click on each item in the tree to expand or collapse its children. The tree is live, so if a new origin gets added (by adding an iframe, for example), it will be added to each storage type automatically.

+ +

Clicking on a tree item will display detailed information about that item in the Table Widget on the right. For example, clicking on an origin which is a child of the Cookies storage type will show all the cookies belonging to that domain.

+ +

Table Widget

+ +

The table widget displays a list of all the items corresponding to the selected tree item (be it an origin, or database) are listed. Depending on the storage type and tree item, the number of columns in the table might differ.

+ +

All the columns in a Table Widget are resizable. You can hide and show columns by context-clicking on the table header and selecting the columns you want to see:

+ +

+ + + +

There's a search box at the top of the Table Widget:

+ +

+ +

This filters the table to show only items which match the search term. Items match the search term if any of their fields (including fields whose columns you have hidden) contain the search term.

+ +

You can use Ctrl + F (Cmd + F on a Mac) to focus the search box.

+ +

Add and refresh storage

+ +

You'll also have buttons available to add a new storage entry or refresh the view of the currently viewed storage type where applicable (you can't add new entries to IndexedDB or Cache):

+ +

+ + + +

When you select any row in the Storage table widget, the sidebar is shown with details about that row. If a cookie is selected, it will list all the details about that cookie.

+ +

The sidebar can parse the value of the cookie or local storage item or an IndexedDB item and convert it into a meaningful object instead of just a string. For example:

+ + + +

The shown values can also be filtered using the search box at the top of the sidebar.

+ +

Cache Storage

+ +

Under the Cache Storage type you can see the contents of any DOM caches created using the Cache API. If you select a cache, you'll see a list of the resources it contains. For each resource, you'll see:

+ + + +

+ +

Cookies

+ +

When you select an origin inside the Cookies storage type from the storage tree, all the cookies present for that origin will be listed in the table widget. The cookies table has the following columns:

+ + + +
+

Note: Some of the columns are not shown by default — to change the column display, right-click on the existing table headings and use the resulting context menu to show/hide the columns.

+
+ +

You can edit cookies by double-clicking inside cells in the Table Widget and editing the values they contain, and add new cookies by clicking the "Plus" (+) button and then editing the resulting new row to the value you want.

+ +

Context menu

+ +

The context menu for each cookie includes the following commands:

+ + + +

+ +

Local storage / Session storage

+ +

When an origin corresponding to local storage or session storage is selected, the table will list the name and value of all the items corresponding to local storage or session storage.

+ +

You can edit local and session storage items by double-clicking inside cells in the Table Widget and editing the values they contain:

+ +

{{EmbedYouTube("UKLgBBUi11c")}}

+ +

You can delete local storage and session storage entries using the context menu:

+ +

+ +

In Firefox 68 and later, you can also delete local and session storage entries by selecting the item and pressing the backspace key.

+ +

Finally, you can add new storage items by clicking the "Plus" (+) button and then editing the resulting new row to the value you want.

+ +

IndexedDB

+ +

When you select an origin inside the Indexed DB storage type in the storage tree, the table lists the details of all the databases present for that origin.

+ +
+

Note: The data shown in an IndexedDB database is a snapshot of the data as it was when you opened the Storage Inspector tool.

+
+ +

Databases have the following details:

+ + + +

When an IndexedDB database is selected in the storage tree, details about all the object stores are listed in the table. Any object store has the following details:

+ + + +

+ +

When an object store is selected in the storage tree, all the items in that object store are listed in the table. All items have a key and a value associated with them.

+ +

You can delete an IndexedDB database using the context menu in the Storage tree view:

+ +

+ +

If the database cannot be deleted (most commonly because there are still active connections to the database), a warning message will be displayed in the Storage Inspector:

+ +

You can use the context menu in the table widget to delete all items in an object store, or a particular item:

+ +

diff --git a/files/pl/tools/tools_toolbox/index.html b/files/pl/tools/tools_toolbox/index.html new file mode 100644 index 0000000000..02001ef0a8 --- /dev/null +++ b/files/pl/tools/tools_toolbox/index.html @@ -0,0 +1,113 @@ +--- +title: Toolbox +slug: Narzędzia/Tools_Toolbox +translation_of: Tools/Tools_Toolbox +--- +

The Toolbox provides a single home for most of the developer tools that are built into Firefox. You can open it by selecting "Toggle Tools" from the Web Developer menu (under "Tools" on OS X and Linux, or "Firefox" on Windows), or by activating any tool hosted in it (for example, the JavaScript Debugger or the Page Inspector). Alternatively you can press Ctrl + Shift + I on Windows and Linux, or Cmd + Opt + I on OS X.

+

By default, the window appears docked to the bottom side of the Firefox window, but you can detach it if you like. This is what it looks like when it's docked:

+

The window itself is split into two parts: a toolbar along the top, and a main pane underneath:

+

+

Toolbar

+

The toolbar contains controls to activate a particular tool, to dock/float the window, and to close the window.

+

+

Node picker

+

On the far left there's a button to activate the node picker. This lets you select a page element for inspection. See "Selecting elements".

+

Toolbox-hosted tools

+

Then there is an array of labeled buttons which enables you to switch between the different tools hosted by the Toolbox. The array may include the following tools:

+ +

Note that not all the hosted tools are always listed here: only the tools actually available in this context are shown (for example, not all tools support remote debugging yet, so if the debugging target is not the Firefox instance that launched the window, not all the hosted tools will be shown).

+

Extra tools

+

Next there's an array of buttons that can be added or removed in the developer tool settings. By default this array includes:

+ +

The following tools are not included in the toolbar by default, but you can add them in the settings:

+ +

Toolbox controls

+

Finally there's a row of buttons to:

+ +

Settings

+

Clicking the "Settings" button () gives you access to settings for the Toolbox itself and for the tools it hosts:

+

+

Default Firefox Developer Tools

+

This group of checkboxes determines which tools are enabled in the toolbox. New tools are often included in Firefox but not enabled by default.

+

Available Toolbox Buttons

+

This group of checkboxes determines which "standalone tools" get buttons in the toolbar. This defaults to the node picker, the split console, and responsive design mode.

+

Firefox 32 adds a button to take a screenshot of the complete web page, which is unchecked by default.

+

Choose DevTools theme

+

This enables you to switch between a light and a dark theme:

+

+

Common preferences

+

Settings that apply to more than one tool. There's just one of these:

+ +

Inspector

+ +

Web Console

+ +

Style Editor

+ +

JavaScript Profiler

+ +

Editor Preferences

+

Preferences for the CodeMirror source editor, which is included in Firefox and used by several developer tools, including Scratchpad and the Style Editor.

+ +

Advanced settings

+ +

Main Pane

+

The content of the main pane in the window is entirely controlled by, and specific to, the hosted tool currently selected.

diff --git a/files/pl/tools/validators/index.html b/files/pl/tools/validators/index.html new file mode 100644 index 0000000000..ee649caa20 --- /dev/null +++ b/files/pl/tools/validators/index.html @@ -0,0 +1,45 @@ +--- +title: Walidatory +slug: Narzędzia/Walidatory +tags: + - Narzędzia +translation_of: Tools/Validators +--- +

 

+
Karty paneli bocznych nie są dostępne w tej chwili.
+Tune-up wizard odsyła z powrotem do devedge
+
+

Jeśli piszesz nowy kod, który nie waliduje się od razu, zobacz zgodne ze standardami narzędzia autorskie i developerskie.

+

Rozszerzenia Firefoksa - Walidatory

+

Quick Reference Sidebar Tabs

+

Zainstaluj DevEdge Toolbox Sidebars, by uzyskać szybki dostęp do odwołań sieciowych.

+

Checky

+

Checky dodaje podmenu do menu kontekstowego przeglądarek Netscape lub Mozilla, umożliwiając poddanie strony, którą aktualnie przeglądasz, osiemnastu różnym usługom walidacji i analizy.

+

Aplikacje i serwisy

+

DevEdge Web Tune-Up Wizard

+

Ten interfejs do serwisów W3C prowadzi autorów stron (od początkujących do średniozaawansowanych) przez proces aktualizacji zawartości, w celu obsługi przez Netscape 7.x, Mozilli i innych przeglądarek wspierających standardy W3C.

+

W3C HTML Validator

+

W3C HTML Validator podda walidacji każdą stronę WWW pod kątem zgodności ze standardami W3C HTML. Jest bardzo użyteczny przy wykrywaniu właściwego jak i nieprawidłowego użycia HTML.

+

W3C CSS Validator

+

W3C CSS Validator podda walidacji arkusz CSS w ramach strony internetowej lub zewnętrznego pliku pod kątem zgodności ze standardami W3C CSS.

+

W3C RDF Validator

+

RDF Validator podda walidacji pliki RDF/XML.

+ +

Narzędzie to sprawdzi odnośniki na podanej stronie.

+

HTML Tidy

+

HTML Tidy jest narzędziem, które może być wykorzystane do zgłaszania błędów na stronach HTML oraz do formatowania kodu stron internetowych w celu zwiększenia jego czytelności (część oprogramowania do tworzenia stron, jak HTML-Kit, zawiera wbudowany HTML Tidy, co czyni walidację prostą i szybką).

+

Serwisy w zakresie dostępności

+

Lynx Viewer

+

Sprawdza stronę internetową, używając wizualizacji Lynksa, umożliwia również walidację dostępności.

+

Bobby Accessibility Check

+

Usługa podda walidacji strony internetowe używając wytycznych dostępności, takich jak U.S. Section 508 i inne.

+
+

Informacje o dokumencie

+ +
+
+  
+

{{ languages( { "en": "en/Tools/Validators", "fr": "fr/Outils/Validateurs", "it": "it/Strumenti/Validatori" } ) }}

diff --git a/files/pl/tools/view_source/index.html b/files/pl/tools/view_source/index.html new file mode 100644 index 0000000000..5781415e73 --- /dev/null +++ b/files/pl/tools/view_source/index.html @@ -0,0 +1,82 @@ +--- +title: View Source +slug: Narzędzia/View_source +translation_of: Tools/View_source +--- +
{{ToolsSidebar}}
+ +

View Source lets you look at the HTML or XML source for the page you're viewing. To activate View Source:

+ + + +

The command opens a new tab with the source for the current page.

+ +

View Source features

+ +

View Source has three additional features, which can be accessed from the context menu in the View Source tab:

+ +

+ +
+
Go to Line
+
Scrolls to the specified line. If the number is higher than the lines in a file, you receive an error message.
+
Wrap Long Lines (toggle)
+
Wraps long lines to the width of the page.
+
Syntax Highlighting (toggle)
+
Applies syntax highlighting to the code.When syntax highlighting is on, View Source also highlights parsing errors in red. Hovering your mouse over errors displays a tooltip explaining the error.
+
+ +

+ +

This feature is useful when you're looking for HTML errors.

+ +

To access Go to Line from the keyboard, press Control + Option + L on macOS, or Alt + Shift + L on Windows or Linux.

+ + + +

It is possible to link to a particular line, by adding the #lineNNN anchor to the url the browser will jump to the NNN line.

+ +

For example view-source:https://www.mozilla.org/#line100

+ +

View Selection Source

+ +

If you select part of a web page and conext-click, you'll see a context menu item labeled "View Selection Source", that behaves just like "View Page Source", except you only see the source for the selection.

+ +

View MathML Source

+ +

If you context-click while the mouse is over some MathML, you'll see a context menu item labeled "View MathML Source": click it to see the MathML source.

+ +

Limitations of View Source

+ +

There are limitations to what View Source does for you that you need to be aware of.

+ +

Error reporter ≠ validator

+ +

View Source only reports parsing errors, not HTML validity errors. For example, putting a {{ HTMLElement("div") }} element as a child of a {{ HTMLElement("ul") }} element isn't a parse error, but it is not valid HTML. Therefore, this error will not be flagged in View Source. If you want to check that HTML is valid, you should use an HTML validator, such as the one offered by W3C.

+ +

Not all parse errors are reported

+ +

Even though all the reported errors are parse errors according to the HTML specification, not all parse errors are reported by View Source. Among the errors that don't get reported:

+ + + +

XML syntax highlighting

+ +

View Source uses the HTML tokenizer when highlighting XML source. While the tokenizer has support for processing instructions when highlighting XML source, that's the only XML-specific capability provided. Because of this, doctypes that have an internal subset are not highlighted correctly, and entity references to custom entities are also not highlighted correctly.

+ +

This mishighlighting can be seen by viewing the source of Firefox chrome files (such as XUL documents). However, this shouldn't be a problem in practice when viewing typical XML files.

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf