aboutsummaryrefslogtreecommitdiff
path: root/files/pl/tools
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 14:49:24 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 14:49:24 +0100
commitde5c456ebded0e038adbf23db34cc290c8829180 (patch)
tree2819c07a177bb7ec5f419f3f6a14270d6bcd7fda /files/pl/tools
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-de5c456ebded0e038adbf23db34cc290c8829180.tar.gz
translated-content-de5c456ebded0e038adbf23db34cc290c8829180.tar.bz2
translated-content-de5c456ebded0e038adbf23db34cc290c8829180.zip
unslug pl: move
Diffstat (limited to 'files/pl/tools')
-rw-r--r--files/pl/tools/about_colon_debugging/index.html207
-rw-r--r--files/pl/tools/browser_toolbox/index.html40
-rw-r--r--files/pl/tools/debugger/how_to/index.html11
-rw-r--r--files/pl/tools/debugger/index.html81
-rw-r--r--files/pl/tools/index.html211
-rw-r--r--files/pl/tools/page_inspector/how_to/index.html13
-rw-r--r--files/pl/tools/page_inspector/how_to/open_the_inspector/index.html15
-rw-r--r--files/pl/tools/page_inspector/index.html58
-rw-r--r--files/pl/tools/page_inspector/ui_tour/index.html108
-rw-r--r--files/pl/tools/performance/flame_chart/index.html103
-rw-r--r--files/pl/tools/performance/index.html97
-rw-r--r--files/pl/tools/storage_inspector/index.html206
-rw-r--r--files/pl/tools/tools_toolbox/index.html113
-rw-r--r--files/pl/tools/validators/index.html45
-rw-r--r--files/pl/tools/view_source/index.html82
15 files changed, 1390 insertions, 0 deletions
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'
+---
+<p><font><font>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).</font></font></p>
+
+<h2 id="Otwieranie_zakładki_aboutdebugging"><font><font>Otwieranie zakładki about:debugging</font></font></h2>
+
+<p><font><font>Zakładkę about:debugging można otworzyć na kilka sposobów:</font></font></p>
+
+<ul>
+ <li><font><font>Wpisać "about:debugging" w pasku URL Firefoxa.</font></font></li>
+ <li><em><font><font>Od Firefoxa 47</font></font></em><font><font> : w menu Narzędzia &gt; Dla twórców witryn, kliknij "Wątki usługowe".</font></font></li>
+ <li><em><font><font>Od Firefoxa 47</font></font></em><font><font> : kliknij ikonę klucza ( </font></font><img alt="" src="https://mdn.mozillademos.org/files/12710/wrench-icon.png" style="height: 21px; width: 21px;"><font><font>), który jest w głównym pasku narzędzi lub w menu Hamburger ( </font></font><img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;"><font><font>), a następnie wybierz „Wątki usługowe”.</font></font></li>
+</ul>
+
+<p><font><font>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).</font></font></p>
+
+<h2 id="Dodatki"><font><font>Dodatki</font></font></h2>
+
+<div class="note">
+<p><font><font>Sekcja Dodatki w zakładce about:debugging obsługuje tylko dodatki niewymagające restartu przeglądarki, w tym </font></font><a href="/en-US/Add-ons/Bootstrapped_extensions"><font><font>basic bootstrapped extensions (niewspierane od FF &gt; 57)</font></font></a><font><font> , </font></font><a href="/en-US/Add-ons/SDK"><font><font>Add-on SDK Add-ons</font></font></a><font><font> i </font></font><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions"><font><font>WebExtensions (jedyne wspierane od FF &gt; 57)</font></font></a><font><font> .</font></font></p>
+</div>
+
+<p><font><font>Ta sekcja pozwala zrobić dwie rzeczy:</font></font></p>
+
+<ul>
+ <li><font><font>Załadować dodatek tymczasowo z dysku</font></font></li>
+ <li><font><font>Podłączyć </font></font><a href="/en-US/Add-ons/Add-on_Debugger"><font><font>Add-on Debugger</font></font></a><font><font> do dodatku niewymagającego restartu.</font></font></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15009/debugger-revised.png" style="display: block; height: 612px; margin-left: auto; margin-right: auto; width: 700px;"></p>
+
+<h3 id="Podłączanie_Add-on_Debuggera"><font><font>Podłączanie Add-on Debuggera</font></font></h3>
+
+<div class="note">
+<p><font><font>Należy zauważyć, że obecnie do debugowania WebExtensions zaleca się korzystanie z Narzędzi Przeglądarki (Browser Toolbox) zamiast Add-on Debuggera.</font><font> Szczegóły są opisane w artykule </font></font><a href="/en-US/Add-ons/WebExtensions/Debugging"><font><font>Debugowanie WebExtensions</font></font></a><font><font>.</font></font></p>
+</div>
+
+<p><font><font>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".</font></font></p>
+
+<p><font><font>Jeżeli ww. przycisk jest nieaktywny należy zaznaczyć checkboxa "Debugowanie dodatków." na górze sekcji.</font></font></p>
+
+<p><font><font>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. </font></font></p>
+
+<p>{{EmbedYouTube("tGGcA3bT3VA")}}</p>
+
+<p><font><font>By zobaczyć co możesz zrobić z Add-on Debuggerem zajrzyj do artykułu </font></font><a href="/en-US/docs/Mozilla/Add-ons/Add-on_Debugger"><font><font>Add-on Debugger</font></font></a>.</p>
+
+<div class="note">
+<p><a id="Enabling_add-on_debugging" name="Enabling_add-on_debugging"><font><font>Przycisk "Włącz debugowanie" zmienia wartości ustawień </font></font></a><code>devtools.chrome.enabled </code><font><font>i </font></font><code>devtools.debugger.remote-enabled</code><font><font>. </font><font>Obie opcje muszą mieć wartość</font><font> </font></font><code>true</code><font><font>, żeby debugowanie było dostępne. Zaznaczenie checkboxa ustawia obie wartości na <code>true</code>, odznaczenie go ustawia obie wartości na <code>false</code>.</font></font></p>
+
+<p><font><font>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 </font></font><a href="/en-US/docs/Tools/Tools_Toolbox#Settings"><font><font>Ustawieniach Narzędzia dla programistów</font></font></a><font><font> .</font></font></p>
+</div>
+
+<h3 id="Ładowanie_dodatku_tymczasowego"><font><font>Ładowanie dodatku tymczasowego</font></font></h3>
+
+<p><font><font>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".</font></font></p>
+
+<p><font><font>Nie musisz pakować ani podpisywać dodatku. Będzie on zainstalowany do następnego restartu Firefoxa.</font></font></p>
+
+<p><font><font>{{EmbedYouTube("sAM78GU4P34")}}</font></font></p>
+
+<p><font><font>Największymi zaletami tej metody w porównaniu z instalacją dodatku z XPI są:</font></font></p>
+
+<ul>
+ <li><font><font>Nie musisz rebuildować XPI i reinstalować dodatku po zmianie kodu.</font></font></li>
+ <li><font><font>Możesz załadować dodatek bez podpisywania go, ani wyłączania wymagania podpisów.</font></font></li>
+</ul>
+
+<h3 id="Aktualizacja_dodatku_tymczasowego"><font><font>Aktualizacja dodatku tymczasowego</font></font></h3>
+
+<p><font><font>Co się dzieje jeśli zainstalujesz dodatek tym sposobem i zaktualizujesz jego pliki?</font></font></p>
+
+<h4 id="Przed_Firefoxem_48"><font><font>Przed Firefoxem 48</font></font></h4>
+
+<ul>
+ <li><font><font>Jeżeli zmienisz pliki, które są ładowane na żądanie, jak </font></font><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts"><font><font>skrypty treści</font></font></a><font><font> lub </font></font><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2"><font><font>pop-upy</font></font></a><font><font> wprowadzone zmiany są odbierane automatycznie i zobaczysz je po ponownym załadowaniu skryptu treści lub podczas wyswietlania pop-upa.</font></font></li>
+ <li><font><font>Jeżeli zmienisz pliki załadowane pozostawać przez cały czas, jak </font></font><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts"><font><font>skrypty tła</font></font></a><font><font> , a następnie można odebrać zmiany dokonane przez wyłączenie i ponowne włączenie narzutu na temat: strony dodatków.</font></font></li>
+ <li><font><font>Jeżeli zmienisz pliki, które są przetwarzane tylko w czasie instalacji, jak </font></font><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json"><font><font>manifest.json</font></font></a><font><font> pliku, musisz ponownie uruchomić Firefoksa, a następnie załadować dodatek ponownie.</font></font></li>
+</ul>
+
+<div class="note">
+<p><font><font>Należy pamiętać, że przed Firefox 48, ładowanie dodatek ponownie naciskając przycisk „Załaduj Temporary add-on” bez ponownego uruchamiania Firefox </font></font><em><font><font>nie działa</font></font></em><font><font> .</font></font></p>
+</div>
+
+<h4 id="Firefox_48_r"><font><font>Firefox 48 r</font></font></h4>
+
+<ul>
+</ul>
+
+<p><font><font>Firefox 48 z roku:</font></font></p>
+
+<ul>
+ <li><font><font>jak poprzednio: jeśli zmienisz pliki, które są ładowane na żądanie, jak </font></font><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts"><font><font>skrypty treści</font></font></a><font><font> lub </font></font><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2"><font><font>pop-upów</font></font></a><font><font> , a zmiany wprowadzane są odbierane automatycznie, a zobaczysz je następnym razem treść skryptu jest załadowany lub popup jest wyświetlany.</font></font></li>
+ <li><font><font>istnieje lepszy sposób obsługiwać inne przypadki: kliknij przycisk „Odśwież” obok przycisku „Debug”. </font><font>To robi to, co mówi:</font></font>
+ <ul>
+ <li><font><font>przeładunku żadnych trwałych skryptów, takich jak </font></font><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts"><font><font>skrypty tle</font></font></a></li>
+ <li><font><font>ponownie parsowania pliku manifest.json, tak aby zmiany </font></font><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code><font><font>, </font></font><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code><font><font>, </font></font><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code><font><font>lub jakiekolwiek inne klawisze nie przyniosą efektu.</font></font></li>
+ </ul>
+ </li>
+</ul>
+
+<div class="note">
+<p><font><font>Zauważ, że w Firefoksie 49 r, przycisk Odśwież jest dostępna tylko dla tymczasowych dodatków. </font><font>zostanie ona wyłączona dla wszystkich innych dodatków.</font></font></p>
+</div>
+
+<h2 id="Tabs"><font><font>Tabs</font></font></h2>
+
+<p><font><font>Firefox 49 roku, strona jest dostępna w Tabs </font></font><code>about:debugging</code><font><font>- to zapewnia pełną listę wszystkich debuggable otwartych kart w bieżącej instancji Firefox.</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13617/about-debugging-tabs.png" style="display: block; height: 628px; margin: 0px auto; width: 900px;"></p>
+
+<p><font><font>Każdy wpis ma zakładka </font></font><em><font><font>Debug</font></font></em><font><font> przycisk obok niego - po kliknięciu, to otworzy się zestaw narzędzi specyficznych dla tej zakładki, co pozwala na debugowanie że zawartość Tab.</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13619/about-debugging-tabs-toolbox.png" style="display: block; height: 628px; margin: 0px auto; width: 900px;"></p>
+
+<div class="note">
+<p><font><font>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 </font></font><code>about:debugging</code><font><font>zacznie 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.</font></font></p>
+</div>
+
+<h2 id="Pracownicy"><font><font>Pracownicy</font></font></h2>
+
+<p><font><font>Strona Pracownicy pokazuje swoim pracownikom, podzielone w następujący sposób:</font></font></p>
+
+<ul>
+ <li><font><font>Wszyscy zarejestrowani </font></font><a href="/en-US/docs/Web/API/Service_Worker_API"><font><font>pracownicy usług</font></font></a></li>
+ <li><font><font>Wszystkie zarejestrowane </font></font><a href="/en-US/docs/Web/API/SharedWorker"><font><font>Pracownicy Shared</font></font></a></li>
+ <li><font><font>Inni pracownicy, w tym </font></font><a href="/en-US/docs/Web/API/ChromeWorker"><font><font>Chrome Robotników</font></font></a><font><font>  i </font></font><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Dedicated_workers"><font><font>Pracowników dedykowane</font></font></a></li>
+</ul>
+
+<p><font><font>Można podłączyć narzędzi programistycznych do każdego pracownika, a także wysyłać powiadomień push do pracowników usług.</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13058/about-debugging-workers.png" style="display: block; height: 642px; margin-left: auto; margin-right: auto; width: 784px;"></p>
+
+<h3 id="Pracownik_serwisu_stan"><font><font>Pracownik serwisu stan</font></font></h3>
+
+<p><font><font>Z Firefoksa 52, lista pracowników służby pokazuje stan pracownika serwisu w jego </font></font><a href="https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle"><font><font>cyklu życia</font></font></a><font><font> . </font><font>Trzy stany wyróżnia się:</font></font></p>
+
+<ul>
+ <li><em><font><font>„Rejestrowanie”</font></font></em><font><font> : obejmuje wszystkie stany pomiędzy pracownikiem serwisowego pierwszej rejestracji, a jego przejęcia kontroli stron. </font><font>Oznacza to, że podsumowuje „Instalowanie”, „aktywacji” i „Oczekiwanie”, stwierdza.</font></font></li>
+ <li><em><font><font>„Running”</font></font></em><font><font> : pracownik usług jest obecnie uruchomiony. </font><font>Jest zainstalowany i aktywowany, a obecnie obsługi zdarzeń.</font></font></li>
+ <li><em><font><font>„Stopped”</font></font></em><font><font> : pracownik usługa jest zainstalowany i aktywowany, ale została rozwiązana po bezczynności.</font></font></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14488/service-worker-status.png" style="display: block; height: 555px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<div class="note">
+<p><font><font>Ta sekcja używa prostego ServiceWorker demo, którego gospodarzem w </font></font><a href="https://serviceworke.rs/push-simple/"><font><font>https://serviceworke.rs/push-simple/</font></font></a><font><font> .</font></font></p>
+</div>
+
+<h3 id="pracownicy_debugowania"><font><font>pracownicy debugowania</font></font></h3>
+
+<p><font><font>Dla pracownika serwisu, jeśli jest już uruchomiony, zobaczysz dwa przyciski obok niej, oznaczony „Debug” i „push”. </font><font>Jeśli nie jest już uruchomiony, zobaczysz jeden przycisk, oznaczony „Start”: Kliknij, aby rozpocząć pracownika serwisu.</font></font></p>
+
+<p><font><font>Kliknięcie „Debug” łączy debugger JavaScript i konsolę do tego pracownika. </font><font>Można ustawić punkty przerwania, krok za pomocą kodu, obserwować zmienne, ocenić kod i tak dalej:</font></font></p>
+
+<p><font><font>{{EmbedYouTube("Z8ax79sHWDU")}}</font></font></p>
+
+<h3 id="pracownicy_rejestrowanie"><font><font>pracownicy rejestrowanie</font></font></h3>
+
+<p><font><font>Po pierwsze, nie będzie widać żadnych pracowników wymienionych poniżej </font></font><em><font><font>pracownicy usług</font></font></em><font><font> lub </font></font><em><font><font>udostępnionych Pracowników</font></font></em><font><font> . </font><font>Tak szybko, jak pracownik jest zarejestrowany, wykaz jest aktualizowany:</font></font></p>
+
+<p><font><font>{{EmbedYouTube("wy4kyWFhFF4")}}</font></font></p>
+
+<div class="note">
+<p><font><font>Przed Firefox 47, pracownicy usług zostały pokazane tylko wtedy, gdy zostały one faktycznie działa.</font></font></p>
+</div>
+
+<h3 id="pracownicy_usług_Wyrejestrowywanie"><font><font>pracownicy usług Wyrejestrowywanie</font></font></h3>
+
+<div class="geckoVersionNote">
+<p><font><font>Nowy Firefox 48.</font></font></p>
+</div>
+
+<p><font><font>Uruchamianie w Firefoksie 48, zobaczysz link o nazwie „wyrejestrować” obok każdego zarejestrowanego pracownika serwisu:</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13056/unregister-sw.png" style="display: block; margin-left: auto; margin-right: auto; width: 700px;"></p>
+
+<p><font><font>Kliknij link, aby wyrejestrować pracownika serwisu.</font></font></p>
+
+<h3 id="Wysyłanie_zdarzeń_wypychania_do_pracowników_usług"><font><font>Wysyłanie zdarzeń wypychania do pracowników usług</font></font></h3>
+
+<div class="note">
+<p><font><font>Wysyłanie zdarzeń wypychania w about: debugowanie jest nowego w Firefoksie 47.</font></font></p>
+</div>
+
+<p><font><font>Do debugowania powiadomień Push, można ustawić punkt przerwania w </font></font><a href="/en-US/docs/Web/API/PushEvent"><font><font>wydarzeniu Push</font></font></a><font><font> słuchacza. </font><font>Jednakże, można również debugować powiadomienia push lokalnie, bez potrzeby serwera. </font><font>Wystarczy kliknąć przycisk „push”, aby wysłać zdarzenie Push pracownikowi serwisu:</font></font></p>
+
+<p><font><font>{{EmbedYouTube ( "62SkLyA-ZnO")}}</font></font></p>
+
+<h3 id="pracownicy_usług_nie_są_kompatybilne"><font><font>pracownicy usług nie są kompatybilne</font></font></h3>
+
+<div>
+<p><font><font>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.</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13613/sw-not-compatible.png" style="display: block; height: 705px; margin: 0px auto; width: 1011px;"></p>
+</div>
+
+<p><font><font>pracownicy usług mogą być niedostępne z kilku powodów:</font></font></p>
+
+<ul>
+ <li><font><font>Jeśli używasz Prywatna okno przeglądania.</font></font></li>
+ <li><font><font>Jeśli preferencji Historia jest ustawiony na „Nigdy nie pamiętał historię” lub „Zawsze używaj trybu przeglądania prywatnego”.</font></font></li>
+ <li><font><font>Jeśli </font></font><code>dom.serviceWorkers.enable</code><font><font>preferencji jest ustawiona na false w </font></font><code>about:config</code><font><font>.</font></font></li>
+</ul>
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
+---
+<p>The Browser Toolbox enables you to debug add-ons and the browser's own JavaScript code rather than just web pages like the normal <a href="/en-US/docs/Tools_Toolbox">Toolbox</a>.  The Browser Toolbox's context is the whole browser rather than just single page on a single tab.</p>
+
+<p><em>Note:  If you want to debug a specific add-on that is restartless or SDK-based then try the <a href="/en-US/Add-ons/Add-on_Debugger">Add-on Debugger</a>.  Use the Browser Toolbox for add-ons that are neither.</em></p>
+
+<h2 id="Enabling_the_Browser_Toolbox" style="line-height: 30px; font-size: 2.14285714285714rem;">Enabling the Browser Toolbox </h2>
+
+<div>
+<p>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".</p>
+
+<p>To do this, open the Developer Tools <a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox">Toolbox</a>'s <a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox#Settings">Settings</a>, go to the section "<a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox#Advanced_settings">Advanced Settings</a>", and check the settings "Enable chrome and addon debugging" and "Enable remote debugging".</p>
+</div>
+
+<h2 id="Opening_the_Browser_Toolbox"><span style="font-size: 2.14285714285714rem;">Opening</span> the Browser Toolbox</h2>
+
+<p><span style="line-height: 1.5;">Open the Browser Toolbox through the </span><span style="line-height: 1.5;">menu button </span><img alt="new fx menu" class="wiki-image frameless" src="https://support.cdn.mozilla.net/media/uploads/gallery/images/2014-01-10-13-08-08-f52b8c.png" style="line-height: 1.5;" title=""><span style="line-height: 1.5;"> and the menu items "Developer" then "Browser Toolbox".</span><span style="line-height: 1.5;"> </span></p>
+
+<p><span style="line-height: 1.5;">Click the menu item and you'll be presented with a dialog like this (this can be removed by setting the </span><code style="font-style: normal; line-height: 1.5;">devtools.debugger.prompt-connection</code><span style="line-height: 1.5;"> property to false):</span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6663/warning.png" style="width: 554px; height: 243px; display: block; margin-left: auto; margin-right: auto;">Click OK, and the Browser Toolbox will open in its own window:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6665/browser-toolbox.png" style="display: block; margin-left: auto; margin-right: auto;">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:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Debugger">Debugger</a>  (<em>Note:  If you want to debug a specific add-on that is restartless or SDK-based then try the <a href="/en-US/Add-ons/Add-on_Debugger">Add-on Debugger</a>.)</em></li>
+ <li><a href="/en-US/docs/Tools/Browser_Console">Console</a></li>
+ <li><a href="/en-US/docs/Tools/Style_Editor">Style Editor</a></li>
+ <li><a href="/en-US/docs/Tools/Profiler">Profiler</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a></li>
+ <li><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a></li>
+</ul>
+
+<h2 id="Debugging_chrome_and_about_pages">Debugging chrome: and about: pages</h2>
+
+<p>From Firefox 37 onwards, you can debug chrome: and about: pages using the normal <a href="/en-US/docs/Tools/Debugger">Debugger</a>, just as if they were ordinary content pages.</p>
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
+---
+<p><span class="seoSummary">These articles describe how to use the debugger.</span></p>
+
+<p>{{ ListSubpages () }}</p>
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
+---
+<p> JavaScript Debugger pozwala przejść przez kod JavaScript i spawdzić lub zmienić jego stan, aby pomóc wyśledzić błędy.</p>
+
+<p><span id="result_box" lang="pl"><span class="hps">Można go używać</span> <span class="hps">do</span> <span class="hps">debugowania kodu.</span> D<span class="hps">ziała lokalnie</span> <span class="hps">w Firefoksie</span> <span class="hps">lub pracuje</span> <span class="hps">zdalnie</span></span>, na przykład w urządzeniu Firefox OS lub w przeglądarce Firefox na Androida. Zobacz <a href="/en-US/docs/Tools/Remote_Debugging">zdalne debugowanie </a>by nauczyć się jak przełączyć debuggera do trybu zdalnego.</p>
+
+<p>{{EmbedYouTube("sK8KU8oiF8s")}}</p>
+
+<hr>
+<h2 id="Użytkownik_interfejsu_Tour">Użytkownik interfejsu Tour</h2>
+
+<p>Aby odnaleźc drogę debuggera, oto <a href="/en-US/docs/Tools/Debugger/UI_Tour">szybkie zwiedzanie UI.</a></p>
+
+<hr>
+<h2 id="Jak_to_zrobić">Jak to zrobić?</h2>
+
+<p>Aby dowiedzieć się co można zrobić z użyciem debuggera, zobacz nastepujacy przewodnik:</p>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Debugger/How_to/Open_the_debugger">Otworzenie debuggera</a></dt>
+ <dd> </dd>
+ <dt><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_breakpoint">Ustawianie punktu przerwania</a></dt>
+ <dd> </dd>
+ <dt><a href="/en-US/docs/Tools/Debugger/How_to/Disable_breakpoints">Wyłączenie przerwania</a></dt>
+ <dd> </dd>
+ <dt><a href="/en-US/docs/Tools/Debugger/How_to/Step_through_code">Krok za pomocą kodu</a></dt>
+ <dd> </dd>
+ <dt><a href="/en-US/docs/Tools/Debugger/How_to/Break_on_a_DOM_event">Break on a DOM event</a></dt>
+ <dd> </dd>
+ <dt><a href="/en-US/docs/Tools/Debugger/How_to/Highlight_and_inspect_DOM_nodes">Highlight and inspect DOM nodes</a></dt>
+ <dd> </dd>
+ <dt><a href="/en-US/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">Pretty-print a minified file</a></dt>
+ <dd> </dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Debugger/How_to/Search_and_filter">Szukanie i filtry</a></dt>
+ <dd> </dd>
+ <dt><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">Set a conditional breakpoint</a></dt>
+ <dd> </dd>
+ <dt><a href="/en-US/docs/Tools/Debugger/How_to/Examine,_modify,_and_watch_variables">Examine, modify, and watch variables</a></dt>
+ <dd> </dd>
+ <dt><a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">Use a source map</a></dt>
+ <dd> </dd>
+ <dt><a href="/en-US/docs/Tools/Debugger/How_to/Black_box_a_source">Black box a source</a></dt>
+ <dd> </dd>
+ <dt><a href="/en-US/docs/Tools/Debugger/How_to/Debug_eval_sources">Debug eval sources</a></dt>
+ <dd> </dd>
+ <dt><a href="/en-US/docs/Tools/Debugger/How_to/Access_debugging_in_add-ons">Access debugging in add-ons</a></dt>
+ <dd> </dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Referencje">Referencje</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Debugger/Keyboard_shortcuts">Keyboard shortcuts</a></dt>
+ <dd> </dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Debugger/Settings">Settings</a></dt>
+ <dd> </dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
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
+---
+<div>{{ToolsSidebar}}</div>
+
+<p class="summary">Examine, edit, and debug HTML, CSS, and JavaScript on the desktop and on mobile.</p>
+
+<p>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.</p>
+
+<p>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 <a href="/en-US/docs/Tools#Join_the_Developer_tools_community">community links near the bottom of the page</a>). If you have any feedback or questions specifically about the documentation, the <a href="https://discourse.mozilla.org/c/mdn">MDN discourse</a> is a good place to post.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are just getting started with web development and using developer tools, our <a href="/en-US/docs/Learn">learning web development</a> docs will help you — see <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a> and <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools?</a> for good starting points.</p>
+</div>
+
+<h2 id="The_Core_Tools">The Core Tools</h2>
+
+<p>You can open the Firefox Developer Tools from the menu by selecting <em>Tools</em> &gt; <em>Web Developer</em> &gt; <em>Toggle Tools</em> or use the keyboard shortcut <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd> on Windows and Linux, or <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> on macOS.</p>
+
+<p>The ellipsis menu on the right-hand side of Developer Tools, contains several commands that let you perform actions or change tool settings.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16087/DevTools_LayoutMenu.png" style="display: block; height: 290px; margin: 0 auto; width: 225px;"></p>
+
+<table class="standard-table" style="height: 178px; width: 840px;">
+ <tbody>
+ <tr>
+ <td><img alt="" src="https://mdn.mozillademos.org/files/16092/iframe_button.png" style="height: 69px; width: 69px;"></td>
+ <td>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.</td>
+ </tr>
+ <tr>
+ <td><img alt="" src="https://mdn.mozillademos.org/files/16088/camera_button.png" style="height: 69px; width: 69px;"></td>
+ <td>Click this button to take a screenshot of the current page. (<strong>Note:</strong> This feature is not turned on by default and must be enabled in settings before the icon will appear.)</td>
+ </tr>
+ <tr>
+ <td><img alt="" src="https://mdn.mozillademos.org/files/16089/responsive_button.png" style="height: 69px; width: 69px;"></td>
+ <td>Toggles Responsive Design Mode.</td>
+ </tr>
+ <tr>
+ <td><img alt="" src="https://mdn.mozillademos.org/files/16090/menu_button.png" style="height: 69px; width: 69px;"></td>
+ <td>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.</td>
+ </tr>
+ <tr>
+ <td><img alt="" src="https://mdn.mozillademos.org/files/16091/close_button.png" style="height: 69px; width: 69px;"></td>
+ <td>Closes the Developer Tools</td>
+ </tr>
+ </tbody>
+</table>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Page_Inspector">Page Inspector</h3>
+
+<p><a href="/en-US/docs/Tools/Page_Inspector"><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/16371/landingPage_PageInspector.png" style="border: 1px solid black; display: block; height: 171px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>View and edit page content and layout. Visualise many aspects of the page including the box model, animations, and grid layouts.</p>
+</div>
+
+<div class="column-half">
+<h3 id="Web_Console">Web Console</h3>
+
+<p><a href="/en-US/docs/Tools/Web_Console"><img alt="The all-new Console in Firefox 57." src="https://mdn.mozillademos.org/files/16368/landingPage_Console.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>See messages logged by a web page and interact with the page using JavaScript.</p>
+</div>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="JavaScript_Debugger">JavaScript Debugger</h3>
+
+<p><a href="/en-US/docs/Tools/Debugger"><img alt="The all-new Firefox 57 Debugger.html" src="https://mdn.mozillademos.org/files/16369/landingPage_Debugger.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>Stop, step through, examine, and modify the JavaScript running in a page.</p>
+</div>
+
+<div class="column-half">
+<h3 id="Network_Monitor">Network Monitor</h3>
+
+<p><a href="/en-US/docs/Tools/Network_Monitor"><img alt="The Network panel in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/16370/landingPage_Network.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>See the network requests made when a page is loaded.</p>
+</div>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Performance_Tools">Performance Tools</h3>
+
+<p><a href="/en-US/docs/Tools/Performance"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16372/landingPage_Performance.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>Analyze your site's general responsiveness, JavaScript, and layout performance.</p>
+</div>
+
+<div class="column-half">
+<h3 id="Responsive_Design_Mode">Responsive Design Mode</h3>
+
+<p><a href="/en-US/docs/Tools/Responsive_Design_Mode"><img alt="Responsive Design mode in Firefox 57." src="https://mdn.mozillademos.org/files/16373/landingPage_ResponsiveDesign.png" style="border-style: solid; border-width: 1px; display: block; height: 865px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>See how your website or app will look and behave on different devices and network types.</p>
+</div>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Accessibility_inspector">Accessibility inspector</h3>
+
+<p><a href="/en-US/docs/Tools/Accessibility_inspector"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16367/landingPage_Accessibility.png" style="border-style: solid; border-width: 1px; border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>Provides a means to access the page's accessibility tree, allowing you to check what's missing or otherwise needs attention.</p>
+</div>
+
+<div class="column-half"></div>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: The collective term for the UI inside which the DevTools all live is the <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a>.</p>
+</div>
+
+<h2 id="More_Tools">More Tools</h2>
+
+<p>These developer tools are also built into Firefox. Unlike the "Core Tools" above, you might not use them every day.</p>
+
+<div class="twocolumns">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Memory">Memory</a></dt>
+ <dd>Figure out which objects are keeping memory in use.</dd>
+ <dt><a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a></dt>
+ <dd>Inspect cookies, local storage, indexedDB, and session storage present in a page.</dd>
+ <dt><a href="/en-US/docs/Tools/DOM_Property_Viewer">DOM Property Viewer</a></dt>
+ <dd>Inspect the page's DOM properties, functions, etc.</dd>
+ <dt><a href="/en-US/docs/Tools/Eyedropper">Eyedropper</a></dt>
+ <dd>Select a color from the page.</dd>
+ <dt><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></dt>
+ <dd>A text editor built into Firefox that lets you write and execute JavaScript.</dd>
+ <dt><a href="/en-US/docs/Tools/Style_Editor">Style Editor</a></dt>
+ <dd>View and edit CSS styles for the current page.</dd>
+ <dt><a href="/en-US/docs/Tools/Screenshot_tool">Taking screenshots</a></dt>
+ <dd>Take a screenshot of the entire page or of a single element.</dd>
+ <dt><a href="/en-US/docs/Tools/Measure_a_portion_of_the_page">Measure a portion of the page</a></dt>
+ <dd>Measure a specific area of a web page.</dd>
+ <dt><a href="/en-US/docs/Tools/Rulers">Rulers</a></dt>
+ <dd>Overlay horizontal and vertical rulers on a web page</dd>
+</dl>
+</div>
+
+<div class="column-container">
+<div class="column-third">
+<p><img alt="" src="https://mdn.mozillademos.org/files/15588/logo-developer-quantum.png" style="display: block; margin: 0px auto;"></p>
+
+<p style="text-align: center;">For the latest developer tools and features, try Firefox Developer Edition.</p>
+
+<p><a href="https://www.mozilla.org/en-US/firefox/developer/" style="width: 300px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Download Firefox Developer Edition</a></p>
+</div>
+
+<div class="column-third"></div>
+</div>
+
+<h2 id="Connecting_the_Developer_Tools">Connecting the Developer Tools</h2>
+
+<p>If you open the developer tools using <a href="/en-US/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">keyboard shortcuts</a> 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.</p>
+
+<div class="twocolumns">
+<dl>
+ <dt><a href="/en-US/docs/Tools/about:debugging">about:debugging</a></dt>
+ <dd>Debug add-ons, content tabs, and workers running in the browser.</dd>
+ <dt><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Connecting to Firefox for Android</a></dt>
+ <dd>Connect the developer tools to an instance of Firefox running on an Android device.</dd>
+ <dt><a href="/en-US/docs/Tools/Working_with_iframes">Connecting to iframes</a></dt>
+ <dd>Connect the developer tools to a specific iframe in the current page.</dd>
+ <dt><a href="/en-US/docs/Tools/Valence">Connecting to other browsers</a></dt>
+ <dd>Connect the developer tools to Chrome on Android and Safari on iOS.</dd>
+</dl>
+</div>
+
+<h2 id="Debugging_the_browser">Debugging the browser</h2>
+
+<p>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.</p>
+
+<div class="twocolumns">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Browser_Console">Browser Console</a></dt>
+ <dd>See messages logged by the browser itself and by add-ons, and run JavaScript code in the browser's scope.</dd>
+ <dt><a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a></dt>
+ <dd>Attach the Developer Tools to the browser itself.</dd>
+</dl>
+</div>
+
+<h2 id="Extending_the_devtools">Extending the devtools</h2>
+
+<p>For information on extending the Firefox DevTools, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a> over in the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">Browser Extensions</a> section of MDN.</p>
+
+<h2 id="Migrating_from_Firebug">Migrating from Firebug</h2>
+
+<p>Firebug has come to the end of its lifespan (see <a href="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/">Firebug lives on in Firefox DevTools</a> 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 — <a href="/en-US/docs/Tools/Migrating_from_Firebug">Migrating from Firebug</a>.</p>
+
+<h2 id="Contribute">Contribute</h2>
+
+<p>If you want to help improve the developer tools, these resources will get you started.</p>
+
+<div class="twocolumns">
+<dl>
+ <dt><a href="https://docs.firefox-dev.tools/">Get Involved</a></dt>
+ <dd>Our developer documentation explains how to get involved.</dd>
+ <dt><a href="http://bugs.firefox-dev.tools/">bugs.firefox-dev.tools</a></dt>
+ <dd>A tool helping to find bugs to work on.</dd>
+</dl>
+</div>
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
+---
+<p><span class="seoSummary">Links for various HOW TO's can be found here. These links describe in depth the HOW TO techniques.</span></p>
+
+<p>{{ ListSubpages () }}</p>
+
+<p> </p>
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
+---
+<p>Istnieją dwie główne ścieżki do otworzenia Inspektora:</p>
+
+<ul>
+ <li><em>bez zaznaczonego elementu</em>: z menu "Dla twórców witryn" wybierz opcję "Inspektor" lub wprowadź odpowiadający mu <a href="https://developer.mozilla.org/en-US/docs/tools/Keyboard_shortcuts#Opening_and_closing_tools">skrót klawiaturowy</a></li>
+ <li><em>z zaznaczonym elementem</em>: kliknij prawym przyciskiem myszy element na stronie internetowej i wybierz "Zbadaj Element"</li>
+</ul>
+
+<p>Inspektor pojawi się w oknie przeglądarki:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10055/inspector-in-context.png" style="display: block; margin-left: auto; margin-right: auto; width: 845px;">Aby odnaleźć się w Inspektorze, zobacz <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour">Podróż przez UI</a>.</p>
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
+---
+<div class="boxed translate-rendered">
+<p>Użyj Inspektora Stron, aby badać i modyfikować HTML i CSS na stronie.</p>
+
+<p>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 <a href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging">zdalne debugowanie</a>, by dowiedzieć się, jak połączyć narzędzia deweloperskie ze zdalnym obiektem.</p>
+
+<hr>
+<h2 id="Podróż_przez_Interfejs_Użytkownika">Podróż przez Interfejs Użytkownika</h2>
+
+<p>Aby odnaleźć się w Inspektorze, zobacz <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/UI_Tour">szybką podróż przez UI</a>.</p>
+
+<hr>
+<h2 id="How-to">How-to</h2>
+
+<p>Aby dowiedzieć się, co możesz robić za pomocą Inspektora, zobacz następujące przewodniki:</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Otwórz Inspektora</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">Badaj i edytuj HTML</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Badaj i edytuj tzw. box model</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">Badaj i wybieraj kolory</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page">Zmień położenie elementów na stronie</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Visualize_transforms">Wizualizuj transformacje</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API">Używaj Inspektora API</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">Zaznacz element</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Badaj i edytuj CSS</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Badaj detektory zdarzeń</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Pracuj z animacjami</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Edytuj filtry CSS</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/View_background_images">Zobacz zdjęcia w tle</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">Użyj Inspektora z Konsoli WWW</a></li>
+</ul>
+</div>
+
+<hr>
+<h2 id="Odniesienie">Odniesienie</h2>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/Keyboard_shortcuts">Skróty klawiaturowe </a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox#Inspector">Ustawienia</a></li>
+</ul>
+</div>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt> </dt>
+ <dd> </dd>
+</dl>
+</div>
+</div>
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
+---
+<p>Ten artykuł jest szybkim wprowadzeniem do głównych sekcji Interfejsu Użytkownika (UI) Inspektora Stron.</p>
+
+<p>Obejmuje on trzy komponenty najwyższego poziomu UI Inspektora:</p>
+
+<ul>
+ <li>przycisk "Zaznacz element"</li>
+ <li>sekcja HTML (na obrazku: HTML pane)</li>
+ <li>sekcja CSS (na obrazku: CSS pane)</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13114/inspector-overview.png" style="display: block; height: 801px; margin-left: auto; margin-right: auto; width: 944px;">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.</p>
+
+<h2 id="Przycisk_Zaznacz_element">Przycisk "Zaznacz element"</h2>
+
+<p>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:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13122/select-element.png" style="display: block; height: 801px; margin-left: auto; margin-right: auto; width: 944px;"></p>
+
+<p>Pamiętaj, że jest to część tzw. <a href="/en-US/docs/Tools/Tools_Toolbox#Toolbar">main toolbox toolbar</a>, więc przycisk ten jest dostępny z dowolnego narzędzia, nie tylko z Inspektora.</p>
+
+<p>Aby dowiedzieć się, jak zaznaczyć element, zobacz przewodnik o <a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">zaznaczaniu elementu</a>.</p>
+
+<h2 id="Sekcja_HTML">Sekcja HTML</h2>
+
+<p>Inspektor jest podzielony na dwie części. Lewa część Inspektora to sekcja HTML (na obrazku: HTML pane)</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13116/markup-in-context.png" style="display: block; height: 1754px; margin-left: auto; margin-right: auto; width: 932px;"></p>
+
+<p>Aby dowiedzieć się więcej o budowie sekcji HTML, zobacz przewodnik o <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">badaniu i edytowaniu HTML</a>.</p>
+
+<h2 id="Sekcja_CSS">Sekcja CSS</h2>
+
+<p>Prawa część Inspektora to sekcja CSS (na obrazku: CSS pane):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13118/rules-in-context.png" style="display: block; height: 1778px; margin-left: auto; margin-right: auto; width: 932px;">Sekcja CSS jest podzielona 5 perspektyw:</p>
+
+<ul>
+ <li>Widok Reguł (Rules)</li>
+ <li>Widok Wyliczony (Computed)</li>
+ <li>Widok Czcionek (Fonts)</li>
+ <li>Widok Modelu Pudełkowego (Box Model)</li>
+ <li>Widok Animacji (Animations)</li>
+</ul>
+
+<p>Użyj zakładek w górnej części sekcji CSS, aby przełączać się pomiędzy różnymi widokami.</p>
+
+<h3 id="Widok_Reguł">Widok Reguł</h3>
+
+<p>Widok Reguł wyświetla wszystkie reguły pasujące do zaznaczonego elementu, w kolejności od najbardziej do najmniej specyficznych:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13120/rules-view.png" style="display: block; height: 866px; margin-left: auto; margin-right: auto; width: 519px;"></p>
+
+<p>Zobacz <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Badaj i edytuj CSS</a> dla dalszych szczegółów.</p>
+
+<h3 id="Widok_Wyliczony">Widok Wyliczony</h3>
+
+<p>Widok Wyliczony pokazuje całe wyliczone CSS dla zaznaczonego elementu.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13130/computed-view.png" style="display: block; height: 856px; margin-left: auto; margin-right: auto; width: 519px;"></p>
+
+<p>Zobacz <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Badaj i edytuj CSS</a> dla dalszych szczegółów.</p>
+
+<h3 id="Widok_Czcionek">Widok Czcionek</h3>
+
+<div class="warning">
+<p>Zaczynając od Firefoksa 47, widok Czcionek jest domyślnie wyłączony. Pracujemy nad bardziej funkcjonalnym zamiennikiem.</p>
+
+<p>Na tą chwilę, jeśli chcesz zobaczyć widok Czcionek, odwiedź <code>about:config</code>, znajdź preferencję <code>devtools.fontinspector.enabled</code> i ustaw ją na <code>true</code>.</p>
+</div>
+
+<p>Widok Czcionek pokazuje wszystkie czcionki na stronie wraz z przykładami ich użycia, które można edytować.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10015/css-fonts.png" style="display: block; margin-left: auto; margin-right: auto; width: 451px;"></p>
+
+<p>Odwiedź stronę <a href="/en-US/docs/Tools/Page_Inspector/How_to/View_fonts">Zobacz Czcionki</a> dla dalszych szczegółów.</p>
+
+<h3 id="Widok_Modelu_Pudełkowego">Widok Modelu Pudełkowego</h3>
+
+<p>Widok Modelu Pudełkowego pokazuje edytowalny widok modelu pudełkowego zaznaczonego elementu.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13128/box-model-view.png" style="display: block; height: 850px; margin-left: auto; margin-right: auto; width: 519px;"></p>
+
+<p>Zabacz <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Badaj i edytuj model pudełkowy</a> dla dalszych szczegółów.</p>
+
+<h3 id="Widok_Animacji">Widok Animacji</h3>
+
+<p>Widok Animacji pozwala zobaczyć szczegóły dowolnej animacji zastosowanej w zaznaczonym elemencie, oraz udostępnia kontroler do ich wstrzymania:</p>
+
+<p> </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13126/animations-view.png" style="display: block; height: 854px; margin-left: auto; margin-right: auto; width: 519px;"></p>
+
+<p>Zobacz <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Pracuj z animacjami</a> dla dalszych szczegółów.</p>
+
+<h3 id="Pokażukryj_sekcję_CSS">Pokaż/ukryj sekcję CSS</h3>
+
+<p>Począwszy od Firefoksa 40 w pasku narzędzi istnieje przycisk, za pomocą którego możesz pokazać lub ukryć sekcję CSS:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13124/show-hide-css.png" style="display: block; height: 419px; margin-left: auto; margin-right: auto; width: 630px;"></p>
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
+---
+<div class="summary">
+<p>The Flame Chart shows you the state of the JavaScript stack for your code at every millisecond during the performance profile.</p>
+
+<p>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.</p>
+</div>
+
+<p>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.</p>
+
+<p>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.</p>
+
+<p>Here's a screenshot showing the Flame Chart for a section of a profile:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10989/perf-flame-chart-overview.png" style="display: block; height: 622px; margin-left: auto; margin-right: auto; width: 1676px;"></p>
+
+<p>First of all, you'll see that, in the <a href="/en-US/docs/Tools/Performance/UI_Tour#Recording_overview">recording overview pane</a>, 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.</p>
+
+<p>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.</p>
+
+<p>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.</p>
+
+<h2 id="Zooming_and_panning">Zooming and panning</h2>
+
+<p>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:</p>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <td><strong>Zoom</strong>: increase/decrease the selected portion of the complete profile that's displayed in the Flame Chart</td>
+ <td>
+ <p>1) Mouse wheel up/down in the Flame Chart.</p>
+
+ <p>2) Trackpad 2 fingers up/down in the Flame Chart.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><strong>Pan</strong>: move the selected portion of the complete profile left and right</td>
+ <td>
+ <p>1) Click and drag the selected portion in the <a href="/en-US/docs/Tools/Performance/UI_Tour#Recording_overview">recording overview pane</a>.</p>
+
+ <p>2) Click and drag anywhere in the Flame Chart.</p>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<p>{{EmbedYouTube("BzfkBRFucp8")}}</p>
+
+<h2 id="An_example">An example</h2>
+
+<p>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 <a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a> page: a program that compares three different sorting algorithms. There's a <a href="/en-US/docs/Tools/Performance/Examples/Sorting_algorithms_comparison">separate page</a> that gives an overview of this program's structure.</p>
+
+<p>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:</p>
+
+<pre>sortAll() // 8
+
+ -&gt; sort() // 37
+
+ -&gt; bubbleSort() // 1345
+
+ -&gt; swap() // 252
+
+ -&gt; selectionSort() // 190
+
+ -&gt; swap() // 1
+
+ -&gt; quickSort() // 103
+
+ -&gt; partition() // 12</pre>
+
+<p>First, we'll just select the whole section in which the program was active:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10991/perf-flame-chart-zoomed-out.png" style="display: block; height: 350px; margin-left: auto; margin-right: auto; width: 1212px;"></p>
+
+<p>At the top, colored purple, is the <code>sortAll()</code> call, running throughout the program from start to finish. Underneath that, colored olive-green, are the calls it's making to <code>sort()</code>. Underneath that, like the teeth of a comb, are all the calls being made to each sorting algorithm.</p>
+
+<p>Let's zoom in:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10993/perf-flame-chart-zoom-1.png" style="display: block; height: 350px; margin-left: auto; margin-right: auto; width: 1212px;"></p>
+
+<p>This slice is about 140 ms long, and shows us more details of the functions being called by <code>sort()</code>. The <code>sort()</code> code is just this:</p>
+
+<pre class="brush: js">function sort(unsorted) {
+ console.log(bubbleSort(unsorted));
+ console.log(selectionSort(unsorted));
+ console.log(quickSort(unsorted));
+}</pre>
+
+<p>The markers labeled "bubb..." and colored olive-green are presumably <code>bubbleSort()</code>. 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.</p>
+
+<p>We can also see some functions being called from <code>bubbleSort()</code>, colored purple.</p>
+
+<p>Let's zoom in one more time:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10995/perf-flame-chart-zoom-2.png" style="display: block; height: 348px; margin-left: auto; margin-right: auto; width: 1212px;"></p>
+
+<p>This slice is about 20ms long. We can see that the purple markers underneath <code>bubbleSort()</code> are the calls to <code>swap()</code>. 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 <code>bubbleSort()</code>, but according to the Call Tree view, the profile does contain one under <code>selectionSort()</code>.</p>
+
+<p>We can also see that two of the green markers are for <code>selectionSort()</code> and <code>quickSort()</code>, 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 <code>console.log()</code> calls in <code>sort()</code>.</p>
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
+---
+<p>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 <a href="/en-US/docs/Tools/Performance/UI_Tour#Waterfall_overview">overview</a> of the things the browser was doing to render your site over the profile, and a graph of the <a href="/en-US/docs/Tools/Performance/Frame_rate">frame rate</a> over the profile.</p>
+
+<p>You get four sub-tools to examine aspects of the profile in more detail:</p>
+
+<ul>
+ <li>the <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> shows the different operations the browser was performing, such as executing layout, JavaScript, repaints, and garbage collection</li>
+ <li>the <a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a> shows the JavaScript functions in which the browser spent most of its time</li>
+ <li>the <a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a> shows the JavaScript call stack over the course of the recording</li>
+ <li>the <a href="/en-US/docs/Tools/Performance/Allocations">Allocations</a> view shows the heap allocations made by your code over the course of the recording. This view only appears if you checked "Record Allocations" in the Performance tool settings.</li>
+</ul>
+
+<p>{{EmbedYouTube("WBmttwfA_k8")}}</p>
+
+<hr>
+<h2 id="Getting_started">Getting started</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/UI_Tour">UI Tour</a></dt>
+ <dd>
+ <p>To find your way around the Performance tool, here's a quick tour of the UI.</p>
+ </dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/How_to">How to</a></dt>
+ <dd>Basic tasks: open the tool, create, save, load, and configure recordings</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Components_of_the_Performance_tool">Components of the Performance tool</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/Frame_rate">Frame rate</a></dt>
+ <dd>Understand your site's overall responsiveness.</dd>
+ <dt><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a></dt>
+ <dd>Find bottlenecks in your site's JavaScript.</dd>
+ <dt><a href="/en-US/docs/Tools/Performance/Allocations">Allocations</a></dt>
+ <dd>See the allocations made by your code over the course of the recording.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a></dt>
+ <dd>Understand the work the browser's doing as the user interacts with your site.</dd>
+ <dt><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a></dt>
+ <dd>See which JavaScript functions are executing, and when, over the course of the recording.</dd>
+ <dd> </dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Scenarios">Scenarios</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties">Animating CSS properties</a></dt>
+ <dd>Uses the Waterfall to understand how the browser updates a page, and how animating different CSS properties can affect performance.</dd>
+ <dd> </dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/Scenarios/Intensive_JavaScript">Intensive JavaScript</a></dt>
+ <dd>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.</dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
+
+<div class="column-half">
+<dl>
+ <dd> </dd>
+</dl>
+</div>
+
+<p> </p>
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
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>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:</p>
+
+<ul>
+ <li><em>Cache Storage</em> — any DOM caches created using the <a href="/en-US/docs/Web/API/Cache">Cache API</a>.</li>
+ <li><em>Cookies</em> — All the <a href="/en-US/docs/Web/API/Document/cookie">cookies</a> created by the page or any iframes inside of the page. Cookies created as a part of response of network calls are also listed, but only for calls that happened while the tool is open.</li>
+ <li><em>IndexedDB</em> — All <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> databases created by the page or any iframes inside the page, their Object Stores and the items stored in these Object Stores.</li>
+ <li><em>Local Storage</em> — All <a href="/en-US/docs/Web/API/Window/localStorage">local storage</a> items created by the page or any iframes inside the page.</li>
+ <li><em>Session Storage</em> — All <a href="/en-US/docs/Web/API/Window/sessionStorage">session storage</a> items created by the page or any iframes inside the page.</li>
+</ul>
+
+<p>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.</p>
+
+<h2 id="Opening_the_Storage_Inspector">Opening the Storage Inspector</h2>
+
+<p>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 <kbd>Shift</kbd> + <kbd>F9</kbd> keyboard shortcut.</p>
+
+<p>The <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a> will appear at the bottom of the browser window, with the Storage Inspector activated. It's just called "Storage" in the Developer Toolbox.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16764/storage_inspector.png" style="display: block; margin: 0px auto; width: 600px;"></p>
+
+<h2 id="Storage_Inspector_User_Interface">Storage Inspector User Interface</h2>
+
+<p>The Storage Inspector UI is split into three main components:</p>
+
+<ul>
+ <li><a href="#storage-tree">Storage tree</a></li>
+ <li><a href="#table-widget">Table Widget</a></li>
+ <li><a href="#sidebar">Sidebar</a></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16765/storage_labeled.png" style="display: block; margin: 0 auto; width: 600px;"></p>
+
+<h3 id="Storage_tree"><a name="storage-tree">Storage tree</a></h3>
+
+<p>The storage tree lists all the storage types that the Storage Inspector can inspect:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16766/storage_types.png" style="display: block; height: 129px; margin: 0 auto; width: 400px;"></p>
+
+<p>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.</p>
+
+<p>Under "Cache Storage", objects are organized by origin and then by the name of the cache:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16802/cache_storage.png" style="border: 1px solid black; display: block; height: 215px; margin-left: auto; margin-right: auto; width: 274px;"></p>
+
+<p>IndexedDB objects are organized by origin, then by database name, then by object store name:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16804/indexedDb_storage.png" style="border: 1px solid black; display: block; height: 193px; margin-left: auto; margin-right: auto; width: 274px;"></p>
+
+<p>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:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16803/cookie_storage.png" style="border: 1px solid black; display: block; height: 217px; margin-left: auto; margin-right: auto; width: 274px;"></p>
+
+<p>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.</p>
+
+<p>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.</p>
+
+<h3 id="Table_Widget"><a name="table-widget">Table Widget</a></h3>
+
+<p>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.</p>
+
+<p>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:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16767/cookie_context_menu.png" style="border: 1px solid black; display: block; height: 330px; margin-left: auto; margin-right: auto; width: 914px;"></p>
+
+<h3 id="Search">Search</h3>
+
+<p>There's a search box at the top of the Table Widget:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16808/storage_detail_filter.png" style="border: 1px solid black; display: block; height: 249px; margin-left: auto; margin-right: auto; width: 926px;"></p>
+
+<p>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.</p>
+
+<p>You can use <kbd>Ctrl</kbd> + <kbd>F</kbd> (<kbd>Cmd</kbd> + <kbd>F</kbd> on a Mac) to focus the search box.</p>
+
+<h3 id="Add_and_refresh_storage">Add and refresh storage</h3>
+
+<p>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):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16809/storage_detail_add_refresh.png" style="border: 1px solid black; display: block; height: 249px; margin: 0px auto; width: 926px;"></p>
+
+<h3 id="Sidebar"><a name="sidebar">Sidebar</a></h3>
+
+<p>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.</p>
+
+<p>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:</p>
+
+<ul>
+ <li>A stringified JSON like <code>'{"foo": "bar"}'</code> is shown as the origin JSON: <code>{foo: "bar"}</code>.</li>
+ <li>A string containing a key separated value, like <code>"1~2~3~4"</code> or <code>"1=2=3=4"</code> is shown like an array: <code>[1, 2, 3, 4]</code>.</li>
+ <li>A string containing key-value pairs, like <code>"ID=1234:foo=bar"</code> is shown as JSON: <code>{ID:1234, foo: "bar"}</code>.</li>
+</ul>
+
+<p>The shown values can also be filtered using the search box at the top of the sidebar.</p>
+
+<h2 id="Cache_Storage">Cache Storage</h2>
+
+<p>Under the Cache Storage type you can see the contents of any DOM caches created using the <a href="/en-US/docs/Web/API/Cache">Cache API</a>. If you select a cache, you'll see a list of the resources it contains. For each resource, you'll see:</p>
+
+<ul>
+ <li>the URL for the resource</li>
+ <li>the status code for the request that was made to fetch it.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16810/cache_storage_detail.png" style="border: 1px solid black; display: block; height: 251px; margin-left: auto; margin-right: auto; width: 926px;"></p>
+
+<h2 id="Cookies">Cookies</h2>
+
+<p>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:</p>
+
+<ul>
+ <li><em>Name</em> — The name of the cookie</li>
+ <li><em>Path</em> — The path property of the cookie</li>
+ <li><em>Domain</em> — The domain of the cookie</li>
+ <li><em>Expires on</em> — The time when the cookie will expire. If the cookie is a session cookie, the value of this column will be "Session"</li>
+ <li><em>Last accessed on</em> — When the cookie was last read</li>
+ <li>Created on — When the cookie was created</li>
+ <li><em>Value</em> — The value of the cookie</li>
+ <li><em>HostOnly</em> — Is this cookie a domain cookie: that is, the domain value starts with a "."</li>
+ <li><em>Secure</em> — Is this cookie a secure cookie</li>
+ <li><em>HttpOnly</em> — Is this cookie HTTP only</li>
+ <li><em>sameSite</em> — Is this cookie a same-site cookie? Same-site cookies allow servers to mitigate the risk of CSRF and information leakage attacks by asserting that a particular cookie should only be sent with requests initiated from the same registrable domain.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: 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.</p>
+</div>
+
+<p>You can edit cookies by double-clicking inside cells in the <a href="/en-US/docs/Tools/Storage_Inspector#Table_Widget">Table Widget</a> 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.</p>
+
+<h3 id="Context_menu">Context menu</h3>
+
+<p>The context menu for each cookie includes the following commands:</p>
+
+<ul>
+ <li><em>Add item</em> - add a new cookie.</li>
+ <li><em>Delete &lt;cookie name&gt;.&lt;domain&gt;</em> - deletes the selected cookie</li>
+ <li><em>Delete All From &lt;domain&gt;</em> - deletes all cookies from the selected domain. This must be an exact match. For example, if you select "Delete All From test8.example.com" only cookies from that domain will be deleted. Cookies from "test13.example.com" will not be deleted.</li>
+ <li><em>Delete All</em> - deletes all cookies for the current host.</li>
+ <li><em>Delete All Session Cookies</em> - deletes all cookies for the current host that are scheduled to be deleted when the browser shuts down</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16811/cookie_table_widget_context.png" style="border: 1px solid black; display: block; height: 250px; margin-left: auto; margin-right: auto; width: 924px;"></p>
+
+<h2 id="Local_storage_Session_storage">Local storage / Session storage</h2>
+
+<p>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.</p>
+
+<p>You can edit local and session storage items by double-clicking inside cells in the <a href="/en-US/docs/Tools/Storage_Inspector#Table_Widget">Table Widget</a> and editing the values they contain:</p>
+
+<p>{{EmbedYouTube("UKLgBBUi11c")}}</p>
+
+<p>You can delete local storage and session storage entries using the context menu:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16768/delete_storage_menu.png" style="border: 1px solid black; display: block; height: 270px; margin-left: auto; margin-right: auto; width: 914px;"></p>
+
+<p>In Firefox 68 and later, you can also delete local and session storage entries by selecting the item and pressing the backspace key.</p>
+
+<p>Finally, you can add new storage items by clicking the "Plus" (+) button and then editing the resulting new row to the value you want.</p>
+
+<h2 id="IndexedDB">IndexedDB</h2>
+
+<p>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.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The data shown in an IndexedDB database is a snapshot of the data as it was when you opened the Storage Inspector tool.</p>
+</div>
+
+<p>Databases have the following details:</p>
+
+<ul>
+ <li><em>Database Name</em> — The name of the database</li>
+ <li><em>Storage</em> — The <a href="/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#Different_types_of_data_storage">storage type</a> specified for the database</li>
+ <li><em>Origin</em> — Its origin</li>
+ <li><em>Version</em> — The database version</li>
+ <li><em>Object Stores</em> — Number of object stores in the database</li>
+</ul>
+
+<p>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:</p>
+
+<ul>
+ <li><em>Object Store Name</em> — The name of the object store</li>
+ <li><em>Key</em> — The keyPath property of the object store.</li>
+ <li><em>Auto Increment</em> — Whether auto increment is enabled</li>
+ <li><em>Indexes</em> — Array of indexes present in the object store as shown below</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16812/indexed_db_details.png" style="border: 1px solid black; display: block; height: 250px; margin-left: auto; margin-right: auto; width: 926px;"></p>
+
+<p>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.</p>
+
+<p>You can delete an IndexedDB database using the context menu in the Storage tree view:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16813/indexed_db_context_menu.png" style="border: 1px solid black; display: block; height: 249px; margin-left: auto; margin-right: auto; width: 924px;"></p>
+
+<p>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:<img alt="" src="https://mdn.mozillademos.org/files/16815/indexedDB_delete_warning.png" style="border: 1px solid black; display: block; height: 250px; margin: 0px auto; width: 926px;"></p>
+
+<p>You can use the context menu in the table widget to delete all items in an object store, or a particular item:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16814/indexed_db_table_widget_context.png" style="border: 1px solid black; display: block; height: 249px; margin-left: auto; margin-right: auto; width: 924px;"></p>
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
+---
+<p>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.</p>
+<p>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:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/6923/toolbox.png" style="display: block; margin-left: auto; margin-right: auto;">The window itself is split into two parts: a toolbar along the top, and a main pane underneath:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/6925/toolbox-annotated-29.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<h2 id="Toolbar">Toolbar</h2>
+<p>The toolbar contains controls to activate a particular tool, to dock/float the window, and to close the window.</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/7913/toolbox-toolbar-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<h3 id="Node_picker">Node picker</h3>
+<p>On the far left there's a button to activate the node picker. This lets you select a page element for inspection. See <a href="/en-US/docs/Tools/Page_Inspector#Selecting_elements">"Selecting elements"</a>.</p>
+<h3 id="Toolbox-hosted_tools">Toolbox-hosted tools</h3>
+<p>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:</p>
+<ul>
+ <li><a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">JavaScript Debugger</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector" title="/en-US/docs/Tools/Page_Inspector">Page Inspector</a></li>
+ <li><a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a></li>
+ <li><a href="/en-US/docs/Tools/Profiler" title="/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler">Profiler</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor" title="/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler">Network Monitor</a></li>
+</ul>
+<p>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).</p>
+<h3 id="Extra_tools">Extra tools</h3>
+<p>Next there's an array of buttons that can be added or removed in the <a href="#Settings">developer tool settings</a>. By default this array includes:</p>
+<ul>
+ <li><a href="/en-US/docs/Tools/Web_Console#The_split_console">Toggle split console</a></li>
+ <li><a href="/en-US/docs/Tools/Responsive_Design_View">Responsive Design Mode</a></li>
+</ul>
+<p>The following tools are not included in the toolbar by default, but you can add them in the <a href="#Settings">settings</a>:</p>
+<ul>
+ <li><a href="/en-US/docs/Tools/Paint_Flashing_Tool">Highlight painted area</a></li>
+ <li><a href="/en-US/docs/Tools/3D_View">3D view</a></li>
+ <li><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></li>
+ <li><a href="/en-US/docs/Tools/Eyedropper">Grab a color from the page</a></li>
+ <li>Take a full-page screenshot: this is new in Firefox 32. It takes a screenshot of the complete web page and saves it in your Downloads directory</li>
+ <li><a href="/en-US/docs/tools/Working_with_iframes">Select a frame as the currently targeted document</a>: this is new in Firefox 34.</li>
+</ul>
+<h3 id="Toolbox_controls">Toolbox controls</h3>
+<p>Finally there's a row of buttons to:</p>
+<ul>
+ <li>close the window</li>
+ <li>toggle the window between attached to the bottom of the browser window, and attached to the side of the browser window</li>
+ <li>toggle the window between standalone and attached to the browser window</li>
+ <li>access <a href="#Settings" title="#Settings">developer tool settings</a></li>
+</ul>
+<h2 id="Settings_2"><a name="Settings">Settings</a></h2>
+<p>Clicking the "Settings" button (<img alt="" src="https://mdn.mozillademos.org/files/8623/settings-cog-small.png" style="width: 30px; height: 22px; display: inline-block;">) gives you access to settings for the Toolbox itself and for the tools it hosts:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/8619/devtools-settings.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<h3 id="Default_Firefox_Developer_Tools">Default Firefox Developer Tools</h3>
+<p>This group of checkboxes determines which tools are enabled in the toolbox. New tools are often included in Firefox but not enabled by default.</p>
+<h3 id="Available_Toolbox_Buttons">Available Toolbox Buttons</h3>
+<p>This group of checkboxes determines which "standalone tools" get buttons in the <a href="/en-US/docs/Tools_Toolbox#Toolbar">toolbar</a>. This defaults to the node picker, the split console, and responsive design mode.</p>
+<p>Firefox 32 adds a button to take a screenshot of the complete web page, which is unchecked by default.</p>
+<h3 id="Choose_DevTools_theme">Choose DevTools theme</h3>
+<p>This enables you to switch between a light and a dark theme:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/6933/light-theme.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/6931/dark-theme.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<h3 id="Common_preferences">Common preferences</h3>
+<p>Settings that apply to more than one tool. There's just one of these:</p>
+<ul>
+ <li><em>Enable persistent logs</em>: a setting to control whether or not the Web Console and Network Monitor clear their output when you navigate to a new page.</li>
+</ul>
+<h3 id="Inspector">Inspector</h3>
+<ul>
+ <li><em>Show browser styles</em>: a setting to control whether styles applied by the browser (<a href="/en-US/docs/Web/CSS/Cascade">user-agent styles</a>) should be displayed in the Inspector's <a href="/en-US/docs/Tools/Page_Inspector#Rules_view">Rules view</a>. This setting is new in Firefox 32. Note that this setting is independent of the "Browser styles" checkbox in the Inspector's <a href="/en-US/docs/Tools/Page_Inspector#Computed_view">Computed view</a>.</li>
+ <li><em>Default color unit</em>: a setting to control how colors are represented in the inspector:
+ <ul>
+ <li>Hex</li>
+ <li>HSL(A)</li>
+ <li>RGB(A)</li>
+ <li>name.</li>
+ </ul>
+ </li>
+</ul>
+<h3 id="Web_Console">Web Console</h3>
+<ul>
+ <li><em>Enable timestamps</em>: controls whether the Web Console displays timestamps. From Firefox 28 the Web Console defaults to hiding timestamps.</li>
+</ul>
+<h3 id="Style_Editor">Style Editor</h3>
+<ul>
+ <li><em>Show original sources</em>: when a CSS preprocessor supporting source maps is used, this enables the Style Editor to display the original, preprocessor, sources rather than the generated CSS. <a href="/en-US/docs/Tools/Style_Editor#Source_map_support">Learn more about Style Editor support for CSS source maps</a>. With this setting checked, the <a href="/en-US/docs/Tools/Page_Inspector#Link_to_CSS_file">Page Inspector Rules view will also provide links to the original sources</a>.</li>
+ <li><em>Autocomplete CSS</em>: enable the Style Editor to offer <a href="/en-US/docs/Tools/Style_Editor#Autocomplete">autocomplete suggestions</a>.</li>
+</ul>
+<h3 id="JavaScript_Profiler">JavaScript Profiler</h3>
+<ul>
+ <li><em>Show Gecko platform data</em>: a setting to control whether or not profiles should include Gecko platform symbols.</li>
+</ul>
+<h3 id="Editor_Preferences">Editor Preferences</h3>
+<p>Preferences for the <a href="http://codemirror.net/">CodeMirror</a> source editor, which is included in Firefox and used by several developer tools, including <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a> and the <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>.</p>
+<ul>
+ <li><em>Detect indentation</em>: auto-indent new lines based on the current indentation</li>
+ <li><em>Autoclose brackets</em></li>
+ <li><em>Indent using spaces</em></li>
+ <li><em>Tab size</em></li>
+ <li><em>Keybindings</em>: choose the default CodeMirror keybindings, or keybindings from one of several popular editors:
+ <ul>
+ <li>Vim</li>
+ <li>Emacs</li>
+ <li>Sublime Text</li>
+ </ul>
+ </li>
+</ul>
+<h3 id="Advanced_settings">Advanced settings</h3>
+<ul>
+ <li><em>Disable cache</em>: disable the browser cache to simulate first-load performance. From Firefox 33 onwards this setting persists, meaning that if it is set, caching will be disabled whenever you reopen the devtools. Caching is re-enabled when the devtools are closed.</li>
+ <li><em>Disable JavaScript</em>: reload the current tab with JavaScript disabled</li>
+ <li><em>Enable chrome debugging</em>: enable you to use developer tools in the context of the browser itself, and not only web content</li>
+ <li><em>Enable remote debugging</em>: enable the developer tools to <a href="/en-US/docs/Tools/Remote_Debugging">debug remote Firefox instances</a></li>
+</ul>
+<h2 id="Main_Pane">Main Pane</h2>
+<p>The content of the main pane in the window is entirely controlled by, and specific to, the hosted tool currently selected.</p>
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
+---
+<p> </p>
+<pre class="eval">Karty paneli bocznych nie są dostępne w tej chwili.
+Tune-up wizard odsyła z powrotem do devedge
+</pre>
+<p>Jeśli piszesz nowy kod, który nie waliduje się od razu, zobacz zgodne ze standardami narzędzia <a href="pl/Narz%c4%99dzia_autorskie_zgodne_ze_standardami">autorskie</a> i <a href="pl/Narz%c4%99dzia">developerskie</a>.</p>
+<h3 id="Rozszerzenia_Firefoksa_-_Walidatory" name="Rozszerzenia_Firefoksa_-_Walidatory">Rozszerzenia Firefoksa - Walidatory</h3>
+<h4 id="Quick_Reference_Sidebar_Tabs" name="Quick_Reference_Sidebar_Tabs">Quick Reference Sidebar Tabs</h4>
+<p>Zainstaluj DevEdge Toolbox Sidebars, by uzyskać szybki dostęp do odwołań sieciowych.</p>
+<h4 id="Checky" name="Checky">Checky</h4>
+<p><a class="external" href="http://checky.sourceforge.net/">Checky</a> 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.</p>
+<h3 id="Aplikacje_i_serwisy" name="Aplikacje_i_serwisy">Aplikacje i serwisy</h3>
+<h4 id="DevEdge_Web_Tune-Up_Wizard" name="DevEdge_Web_Tune-Up_Wizard">DevEdge Web Tune-Up Wizard</h4>
+<p><a class="external" href="http://devedge-temp.mozilla.org/toolbox/tools/2001/tune-up/">Ten interfejs do serwisów W3C</a> 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.</p>
+<h4 id="W3C_HTML_Validator" name="W3C_HTML_Validator">W3C HTML Validator</h4>
+<p><a class="external" href="http://validator.w3.org/">W3C HTML Validator</a> 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.</p>
+<h4 id="W3C_CSS_Validator" name="W3C_CSS_Validator">W3C CSS Validator</h4>
+<p><a class="external" href="http://jigsaw.w3.org/css-validator/">W3C CSS Validator</a> podda walidacji arkusz CSS w ramach strony internetowej lub zewnętrznego pliku pod kątem zgodności ze standardami W3C CSS.</p>
+<h4 id="W3C_RDF_Validator" name="W3C_RDF_Validator">W3C RDF Validator</h4>
+<p><a class="external" href="http://www.w3.org/RDF/Validator/">RDF Validator</a> podda walidacji pliki RDF/XML.</p>
+<h4 id="Link_Checker" name="Link_Checker">Link Checker</h4>
+<p><a class="external" href="http://validator.w3.org/checklink">Narzędzie to</a> sprawdzi odnośniki na podanej stronie.</p>
+<h4 id="HTML_Tidy" name="HTML_Tidy">HTML Tidy</h4>
+<p><a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> 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 <a class="external" href="http://www.chami.com/html-kit/">HTML-Kit</a>, zawiera wbudowany HTML Tidy, co czyni walidację prostą i szybką).</p>
+<h3 id="Serwisy_w_zakresie_dost.C4.99pno.C5.9Bci" name="Serwisy_w_zakresie_dost.C4.99pno.C5.9Bci">Serwisy w zakresie dostępności</h3>
+<h4 id="Lynx_Viewer" name="Lynx_Viewer">Lynx Viewer</h4>
+<p><a class="external" href="http://www.delorie.com/web/lynxview.html">Sprawdza stronę internetową</a>, używając wizualizacji Lynksa, umożliwia również walidację dostępności.</p>
+<h4 id="Bobby_Accessibility_Check" name="Bobby_Accessibility_Check">Bobby Accessibility Check</h4>
+<p><a class="external" href="http://bobby.watchfire.com/bobby/html/en/">Usługa</a> podda walidacji strony internetowe używając wytycznych dostępności, takich jak U.S. Section 508 i inne.</p>
+<div class="originaldocinfo">
+ <h3 id="Informacje_o_dokumencie" name="Informacje_o_dokumencie">Informacje o dokumencie</h3>
+ <ul>
+ <li>Ostatnia aktualizacja: 16 sierpnia 2002</li>
+ <li>Informacja o prawach autorskich: © 2001-2003 Netscape.</li>
+ </ul>
+</div>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/Tools/Validators", "fr": "fr/Outils/Validateurs", "it": "it/Strumenti/Validatori" } ) }}</p>
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
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>View Source lets you look at the HTML or XML source for the page you're viewing. To activate View Source:</p>
+
+<ul>
+ <li>context-click in the page and select <em>View Page Source</em></li>
+ <li>press <kbd>Ctrl</kbd> + <kbd>U</kbd> on Windows and Linux, or <kbd>Cmd</kbd> + <kbd>U</kbd> on macOS</li>
+</ul>
+
+<p>The command opens a new tab with the source for the current page.</p>
+
+<h2 id="View_Source_features">View Source features</h2>
+
+<p>View Source has three additional features, which can be accessed from the context menu in the View Source tab:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16909/view_source_context_menu.png" style="display: block; height: 359px; margin: 0 auto; width: 225px;"></p>
+
+<dl>
+ <dt>Go to Line</dt>
+ <dd>Scrolls to the specified line. If the number is higher than the lines in a file, you receive an error message.</dd>
+ <dt>Wrap Long Lines (toggle)</dt>
+ <dd>Wraps long lines to the width of the page.</dd>
+ <dt>Syntax Highlighting (toggle)</dt>
+ <dd>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.</dd>
+</dl>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16910/view_source_error.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p>
+
+<p>This feature is useful when you're looking for HTML errors.</p>
+
+<p>To access Go to Line from the keyboard, press <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd>L</kbd> on macOS, or <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd> on Windows or Linux.</p>
+
+<h2 id="Link_to_a_line_number">Link to a line number</h2>
+
+<p>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.</p>
+
+<p>For example <a>view-source:https://www.mozilla.org/#line100</a></p>
+
+<h2 id="View_Selection_Source">View Selection Source</h2>
+
+<p>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.</p>
+
+<h2 id="View_MathML_Source">View MathML Source</h2>
+
+<p>If you context-click while the mouse is over some <a href="/en-US/docs/Web/MathML">MathML</a>, you'll see a context menu item labeled "View MathML Source": click it to see the MathML source.</p>
+
+<h2 id="Limitations_of_View_Source">Limitations of View Source</h2>
+
+<p>There are limitations to what View Source does for you that you need to be aware of.</p>
+
+<h3 id="Error_reporter_≠_validator">Error reporter ≠ validator</h3>
+
+<p>View Source only reports parsing errors, <strong>not</strong> 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 <strong>is not</strong> 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 <a class="external" href="http://validator.w3.org/" title="http://validator.w3.org/">the one offered by W3C</a>.</p>
+
+<h3 id="Not_all_parse_errors_are_reported">Not all parse errors are reported</h3>
+
+<p>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:</p>
+
+<ul>
+ <li>Bytes that are illegal according to the document's encoding aren't marked as errors.</li>
+ <li>Forbidden characters aren't reported as errors.</li>
+ <li>Errors related to the end-of-file aren't reported.</li>
+ <li>Tree builder errors relating to text (as opposed to tags, comments, or doctypes) aren't reported.</li>
+ <li>Parse errors related to <code>xmlns</code> attributes aren't reported.</li>
+</ul>
+
+<h2 id="XML_syntax_highlighting">XML syntax highlighting</h2>
+
+<p>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.</p>
+
+<p>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.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="external" href="http://hsivonen.iki.fi/view-source/" title="http://hsivonen.iki.fi/view-source/">HTML5 Parser-Based View Source Syntax Highlighting</a> (Blog post)</li>
+</ul>