4 files changed, 194 insertions, 0 deletions
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>