diff options
Diffstat (limited to 'files/pl/narzędzia')
18 files changed, 2104 insertions, 0 deletions
diff --git a/files/pl/narzędzia/about_colon_debugging/index.html b/files/pl/narzędzia/about_colon_debugging/index.html new file mode 100644 index 0000000000..8ed93e0d15 --- /dev/null +++ b/files/pl/narzędzia/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 > 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 > 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 > 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/narzędzia/browser_toolbox/index.html b/files/pl/narzędzia/browser_toolbox/index.html new file mode 100644 index 0000000000..b5a4fa88ce --- /dev/null +++ b/files/pl/narzędzia/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/narzędzia/debugger/how_to/index.html b/files/pl/narzędzia/debugger/how_to/index.html new file mode 100644 index 0000000000..0ee1b834a1 --- /dev/null +++ b/files/pl/narzędzia/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/narzędzia/debugger/index.html b/files/pl/narzędzia/debugger/index.html new file mode 100644 index 0000000000..b81218619f --- /dev/null +++ b/files/pl/narzędzia/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/narzędzia/index.html b/files/pl/narzędzia/index.html new file mode 100644 index 0000000000..8f9560929a --- /dev/null +++ b/files/pl/narzędzia/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> > <em>Web Developer</em> > <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/narzędzia/page_inspector/how_to/index.html b/files/pl/narzędzia/page_inspector/how_to/index.html new file mode 100644 index 0000000000..29373ef1b7 --- /dev/null +++ b/files/pl/narzędzia/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/narzędzia/page_inspector/how_to/open_the_inspector/index.html b/files/pl/narzędzia/page_inspector/how_to/open_the_inspector/index.html new file mode 100644 index 0000000000..4d4b025c45 --- /dev/null +++ b/files/pl/narzędzia/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/narzędzia/page_inspector/index.html b/files/pl/narzędzia/page_inspector/index.html new file mode 100644 index 0000000000..336489b782 --- /dev/null +++ b/files/pl/narzędzia/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/narzędzia/page_inspector/przewodnik_przez_ui/index.html b/files/pl/narzędzia/page_inspector/przewodnik_przez_ui/index.html new file mode 100644 index 0000000000..c3c2375155 --- /dev/null +++ b/files/pl/narzędzia/page_inspector/przewodnik_przez_ui/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/narzędzia/performance/flame_chart/index.html b/files/pl/narzędzia/performance/flame_chart/index.html new file mode 100644 index 0000000000..1edebd4d01 --- /dev/null +++ b/files/pl/narzędzia/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 + + -> sort() // 37 + + -> bubbleSort() // 1345 + + -> swap() // 252 + + -> selectionSort() // 190 + + -> swap() // 1 + + -> quickSort() // 103 + + -> 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/narzędzia/performance/index.html b/files/pl/narzędzia/performance/index.html new file mode 100644 index 0000000000..346399027f --- /dev/null +++ b/files/pl/narzędzia/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/narzędzia/profiler/index.html b/files/pl/narzędzia/profiler/index.html new file mode 100644 index 0000000000..be68c3b552 --- /dev/null +++ b/files/pl/narzędzia/profiler/index.html @@ -0,0 +1,95 @@ +--- +title: JavaScript Profiler +slug: Narzędzia/Profiler +translation_of: Tools/Performance +--- +<p>Use the Profiler tool to find bottlenecks in your JavaScript code. The Profiler periodically samples the current JavaScript call stack and compiles statistics about the samples.</p> +<p>You can launch the Profiler by selecting "Profiler" from the "Web Developer" menu. You'll find the "Web Developer" menu under the "Tools" menu on Linux and OS X, and directly under the "Firefox" menu on Windows.</p> +<p>The <a href="/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a> will open, with the Profiler selected.</p> +<h2 id="Sampling_Profilers"><a name="sampling-profilers">Sampling Profilers</a></h2> +<p>The JavaScript profiler is a sampling profiler. This means that it periodically samples the state of the JavaScript engine, and records the stack for the code executing at the time the sample was taken. Statistically, the number of samples taken in which we were executing a particular function corresponds to the amount of time the browser is spending executing it, so you can identify bottlenecks in your code.<br> + <br> + <a name="profiling-example">For example, consider a program like this:</a></p> +<pre class="brush: js">function doSomething() { + var x = getTheValue(); + x = x + 1; // -> sample A + logTheValue(x); +} + +function getTheValue() { + return 5; +} + +function logTheValue(x) { + console.log(x); // -> sample B, sample C +} + +doSomething();</pre> +<p>Suppose we run this program with the profiler active, and in the time it takes to run, the profiler takes three samples, as indicated in the inline comments above.</p> +<p>They're all taken from inside <code>doSomething()</code>, but the second two are inside the <code>logTheValue()</code> function called by <code>doSomething()</code>. So the profile would consist of three stack traces, like this:</p> +<pre>Sample A: doSomething() +Sample B: doSomething() > logTheValue() +Sample C: doSomething() > logTheValue()</pre> +<p>This obviously isn't enough data to tell us anything, but with a lot more samples we might be able to conclude that <code>logTheValue()</code> is the bottleneck in our code.</p> +<h2 id="Creating_a_profile">Creating a profile</h2> +<p>Click the <em>stopwatch</em> button in the Profiler to start recording samples. When Profiler is recording, the stopwatch button will be highlighted. Click on it again to stop recording and save the new profile:</p> +<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/5977/Screen%20Shot%202013-08-26%20at%2010.35.47%20AM.png"></p> +<p>Once you've clicked "Stop", the new profile will open automatically:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5981/Screen%20Shot%202013-08-26%20at%2011.07.18%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p> +<p>This pane's divided into two parts:</p> +<ul> + <li>The left-hand side lists all the profiles you've captured and allows you to load each one. Just above this there are two buttons: the <em>stopwatch</em> button allows you to record a new profile while the <em>Import...</em> button allows you to import previously saved data. When profile is selected, you can save its data as a JSON file by clicking the <em>Save</em> button.</li> + <li>The right-hand side displays the currently loaded profile.</li> +</ul> +<h2 id="Analyzing_a_profile">Analyzing a profile</h2> +<p>The profile is split into two parts:</p> +<ul> + <li>the <a href="#profile-timeline" title="#profile-timeline">profile timeline</a></li> + <li>the <a href="#profile-details" title="#profile-details">profile details</a></li> +</ul> +<h3 id="Profile_timeline"><a name="profile-timeline">Profile timeline</a></h3> +<p>The profile timeline occupies the top part of the profile display:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5987/timeline" style="display: block; margin-left: auto; margin-right: auto;">The horizontal axis is time, and the vertical axis is call stack size at that sample. Call stack represents the amount of active functions at the time when the sample was taken.</p> +<p>Red samples along the chart indicate the browser was unresponsive during that time, and a user would notice pauses in animations and responsiveness. If a profile has red samples, consider breaking this code up into several events, and look into using <a href="/en-US/docs/Web/API/window.requestAnimationFrame" title="/en-US/docs/Web/API/window.requestAnimationFrame">requestAnimationFrame</a> and <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers" title="/en-US/docs/Web/Guide/Performance/Using_web_workers">Workers</a>.</p> +<p>You can examine a specific range within the profile by clicking and dragging inside the timeline:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5989/Screen%20Shot%202013-08-26%20at%2011.17.59%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p> +<p>A new button then appears above the timeline labeled "Sample Range [AAA, BBB]". Clicking that button zooms the profile, and the details view underneath it, to that timeslice:</p> +<p><br> + <img alt="" src="https://mdn.mozillademos.org/files/5991/Screen%20Shot%202013-08-26%20at%2011.18.03%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p> +<h3 id="Profile_details"><a name="profile-details">Profile details</a></h3> +<p>The profile details occupy the bottom part of the profile display:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5993/profiler-details-highligted.png" style="display: block; margin-left: auto; margin-right: auto;">When you first open a new sample, the sample pane contains a single row labeled "(total)", as in the screenshot above. If you click the arrow next to "(total)", you'll see a list of all the top-level functions which appear in a sample.</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5995/Screen%20Shot%202013-08-26%20at%2011.22.10%20AM.png"></p> +<p><strong>Running time</strong> shows the total number of samples in which this function appeared<a href="#footnote-1"><sup>1</sup></a>, followed by the percentage of all samples in the profile in which this function appeared. The first row above shows that there were 2021 samples in the entire profile, and the second row shows that 1914, or 94.7%, of them were inside the <code>detectImage()</code> function.</p> +<p><strong>Self</strong> shows the number of samples in which the sample was taken while executing this function itself, and not a function it was calling. In the <a href="#profiling-example" title="#profiling-example">simple example</a> above, <code>doSomething()</code> would have a <strong>Running time</strong> of 3 (samples A, B, and C), but a <strong>Self</strong> value of 1 (sample A).</p> +<p>The third column gives the name of the function along with the filename and line number (for local functions) or basename and domain name (for remote functions). Functions in gray are built-in browser functions: functions in black represent JavaScript loaded by the page. If you hover the mouse over a row you'll see an arrow to the right of the function's identifier: click the arrow and you'll be taken to the function source.</p> +<h3 id="Expanding_the_call_tree">Expanding the call tree</h3> +<p>In a given row, if there are any samples taken while we were in a function called by this function (that is, if <strong>Running Time</strong> is greater than <strong>Self</strong> for a given row) then an arrow appears to the left of the function's name, enabling you to expand the call tree.</p> +<p>In the <a href="#profiling-example" title="#profiling-example">simple example</a> above, the fully-expanded call tree would look like this:</p> +<table class="standard-table"> + <tbody> + <tr> + <td style="text-align: center;"><strong>Running Time</strong></td> + <td style="text-align: center;"><strong>Self</strong></td> + <td style="text-align: center;"> </td> + </tr> + <tr> + <td style="text-align: center;">3 100%</td> + <td style="text-align: center;">1</td> + <td style="text-align: center;">doSomething()</td> + </tr> + <tr> + <td style="text-align: center;">2 67%</td> + <td style="text-align: center;">2</td> + <td style="text-align: center;">logTheValue()</td> + </tr> + </tbody> +</table> +<p>To take a more realistic example: in the screenshot below, looking at the second row we can see that 1914 samples were taken inside the <code>detectImage()</code> function. But all of them were taken in functions called by <code>detectImage()</code> (the <strong>Self</strong> cell is zero). We can expand the call tree to find out which functions were actually running when most of the samples were taken:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5999/bla.png" style="display: block; margin-left: auto; margin-right: auto;"></p> +<p>This tells us that 6 samples were taken when we were actually executing <code>detectAtScale(), </code>12 when we were executing <code>getRect()</code> and so on.</p> +<h2 id="Footnotes">Footnotes</h2> +<ol> + <li><a name="footnote-1">If the function is called multiple times from different sources, it will be represented multiple times in the Profiler output. So generic functions like <code>forEach</code> will appear multiple times in the call tree.</a></li> +</ol> +<p> </p> diff --git a/files/pl/narzędzia/storage_inspector/index.html b/files/pl/narzędzia/storage_inspector/index.html new file mode 100644 index 0000000000..1638fcd918 --- /dev/null +++ b/files/pl/narzędzia/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 <cookie name>.<domain></em> - deletes the selected cookie</li> + <li><em>Delete All From <domain></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/narzędzia/tools_toolbox/index.html b/files/pl/narzędzia/tools_toolbox/index.html new file mode 100644 index 0000000000..02001ef0a8 --- /dev/null +++ b/files/pl/narzędzia/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/narzędzia/view_source/index.html b/files/pl/narzędzia/view_source/index.html new file mode 100644 index 0000000000..5781415e73 --- /dev/null +++ b/files/pl/narzędzia/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> diff --git a/files/pl/narzędzia/walidatory/index.html b/files/pl/narzędzia/walidatory/index.html new file mode 100644 index 0000000000..ee649caa20 --- /dev/null +++ b/files/pl/narzędzia/walidatory/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/narzędzia/webide/index.html b/files/pl/narzędzia/webide/index.html new file mode 100644 index 0000000000..0598fae682 --- /dev/null +++ b/files/pl/narzędzia/webide/index.html @@ -0,0 +1,467 @@ +--- +title: WebIDE +slug: Narzędzia/WebIDE +tags: + - Apps + - B2G + - Debugging + - Firefox OS + - NeedsTranslation + - TopicStub + - WebIDE + - tool +translation_of: Archive/WebIDE +--- +<div class="geckoVersionNote"> +<p>WebIDE is available from Firefox 34 onwards.</p> +</div> + +<div class="summary"> +<p>WebIDE is the replacement for the <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a>. Like the App Manager, it enables you to run and debug <a href="/en-US/Firefox_OS">Firefox OS</a> apps using the <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> or a real Firefox OS device.</p> + +<p>However, it also provides an editing environment for you to create and develop Firefox OS apps, including a tree view of all the files in your app with the ability to edit and save them, and two app templates to help you get started.</p> + +<p>Finally, WebIDE enables you to connect the <a href="/en-US/docs/Tools">Firefox Developer Tools</a> to a number of other browsers, including Firefox for Android, Chrome on Android, and Safari on iOS. See the <a href="/en-US/docs/Tools/Remote_Debugging">Remote Debugging</a> page for instructions on how to connect to a specific browser.</p> +</div> + +<p>With WebIDE, you first <a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">set up one or more runtimes</a>. A runtime is an environment in which you'll run and debug the app. A runtime could be a Firefox OS device connected to the desktop over USB, or it could be a Firefox OS Simulator installed on the desktop itself.</p> + +<p>Next, you <a href="/en-US/docs/Tools/WebIDE#Creating_and_opening_apps">create an app, or open an existing app</a>. If you're creating a new app you start with a template that includes the directory structure and the minimum boilerplate you need to get started, or a more complete template that shows how to use a privileged API. WebIDE shows your app's files in a tree, and you can edit and save them using a built-in source editor. Of course, you don't have to use the built-in editor: you can develop your app entirely outside WebIDE, and only use it for debugging.</p> + +<p>Finally, you can <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Running_and_debugging_apps">install the app in one of the runtimes and run it</a>. You can then open the usual suite of developer tools - the <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="/en-US/docs/Tools/Web_Console">Console</a>, <a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a> and so on - to examine and modify the running app.</p> + +<h2 id="System_requirements">System requirements</h2> + +<p>To develop and debug apps using WebIDE, all you need is Firefox version 33 or later. To test on a real Firefox OS device, you need a device running Firefox OS 1.2 or later, and a USB cable.</p> + +<p>You can only use WebIDE for Firefox OS if you're targeting Firefox OS 1.2 or later.</p> + +<h2 id="Opening_WebIDE">Opening WebIDE</h2> + +<p>There are three ways to open WebIDE:</p> + +<ul> + <li>In the Web Developer menu, click on the "WebIDE" entry and WebIDE opens.</li> + <li>Use the keybinding Shift-F8.</li> + <li>A dedicated icon in the Firefox toolbar. This is always present if you're using <a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a>, and with any Firefox from version 36 onwards it appears after you've opened the WebIDE once:</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9437/webide-icon.png" style="width: 897px; display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Here's what the WebIDE looks like:<img alt="" src="https://mdn.mozillademos.org/files/8033/webide-initial.png" style="width: 720px; height: 560px; display: block; margin-left: auto; margin-right: auto;">The dropdown on the left labeled "Open App" lets you open existing apps or create new ones. The dropdown on the right labeled "Select Runtime" lets you select a runtime or set up a new runtime.</p> + +<p>The buttons in the middle run, stop, and debug the app: they are only enabled when you have opened an app and selected a runtime.</p> + +<p>From Firefox 36, you can change the font size throughout WebIDE using the standard keyboard shortcuts (use <code>Command</code> instead of <code>Control</code> on OS X):</p> + +<ul> + <li><code>Ctrl +</code> increases font size</li> + <li><code>Ctrl -</code> decreases font size</li> + <li><code>Ctrl 0</code> resets the font size to the default</li> +</ul> + +<h2 id="Setting_up_runtimes">Setting up runtimes</h2> + +<p>Under the "Select Runtime" dropdown, runtimes are grouped into three types:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Connecting_a_Firefox_OS_device">USB devices</a>: Firefox OS devices connected over USB. From Firefox 36 this also gets you connected to <a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">Firefox for Android over USB</a>.</li> + <li><a href="/en-US/docs/Tools/WebIDE#Adding_a_Simulator">Simulators</a>: instances of the Firefox OS Simulator that you've installed</li> + <li><a href="/en-US/docs/Tools/WebIDE#Custom_runtimes">Custom</a>: use this to connect a runtime to WebIDE using an arbitrary name and port. From Firefox 36, this runtime type is renamed "Other". If you have the <a href="/en-US/docs/Tools/Valence">Valence</a> add-on installed, this section will also list the <a href="/en-US/docs/Tools/WebIDE#Valence-enabled_runtimes">additional runtimes it enables</a>.</li> +</ul> + +<p>The first time you click the dropdown, you might not see any runtimes here:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8043/webide-no-runtimes.png" style="width: 723px; height: 564px; display: block; margin-left: auto; margin-right: auto;">The rest of this section describes how you can add some runtimes.</p> + +<h3 id="Connecting_a_Firefox_OS_device">Connecting a Firefox OS device</h3> + +<p>Before you can connect a Firefox OS device, there's some setup you have to go through:</p> + +<ul> + <li><strong>Check your Firefox OS version: </strong>Make sure your device is running Firefox OS 1.2/Boot2Gecko 1.2 or higher. To check the version, go to the Settings app on the device, then <code>Device Information > Software</code>. If you don't have a high enough version, find your device in the <a href="/en-US/Firefox_OS/Developer_phone_guide">developer phone guide</a> and follow the instructions for upgrading.</li> + <li><strong>Enable remote debugging: </strong>In the Settings app on the device, go to <code>Device information > More information > Developer</code>. + <ul> + </ul> + + <ul> + <li>Firefox OS 1.3 and earlier: "Remote Debugging" is just a simple checkbox. Check it.</li> + <li>Firefox OS 1.4 and later: "Remote Debugging" asks you to enable for just ADB, or for ADB and DevTools. Select "ADB and DevTools".</li> + </ul> + </li> + <li><strong>Disable Screen lock on your device:</strong> In the Settings app on the device, go to <code>Screen Lock</code> and uncheck the <code>Lock Screen</code> checkbox. This is required because when the screen gets locked, the phone connection gets lost, meaning it is no longer available for debugging.</li> + <li><strong>If you want unrestricted debugging privileges, including certified apps, built-in apps, and apps already installed on a real device</strong>: See the section on <a href="/en-US/docs/Tools/WebIDE#Unrestricted_app_debugging_%28including_certified_apps.2C_main_process.2C_etc.%29">Unrestricted app debugging (including certified apps, main process, etc.)</a>.</li> +</ul> + +<div class="note"> +<p><strong>Linux only:</strong></p> + +<ul> + <li>Add a <code>udev</code> rules file, as documented in step 3 of this guide to <a href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>. The <code>idVendor</code> attribute to use for the Geeksphone is "05c6", and <a href="http://developer.android.com/tools/device.html#VendorIds">this page</a> lists other <code>idVendor</code> values.</li> +</ul> +</div> + +<div class="note"> +<p><strong>Windows only:</strong></p> + +<ul> + <li>You need to install drivers, as documented in step 3 of this guide to <a href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>. You can find drivers for Geeksphone devices on the <a href="http://downloads.geeksphone.com/">Geeksphone web site</a>. Windows 8 by default will not let you install unsigned drivers. See this tutorial on <a class="external external-icon" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"How to install an unsigned driver on Windows 8"</a>.</li> + <li>If WebIDE can't see your device after following all the steps, you may have to <a class="external external-icon" href="http://blog.fh-kaernten.at/wehr/?p=1182">edit adb_usb.ini</a>.</li> +</ul> +</div> + +<p>If there are any other Android devices connected to your computer, disconnect them. Now connect the device to the computer using USB. You should see the device appear under "USB DEVICES":</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8045/webide-select-runtime-keon.png" style="width: 710px; height: 562px; display: block; margin-left: auto; margin-right: auto;"></p> + +<p>If you don't see your device, see the <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Troubleshooting</a> page.</p> + +<h3 id="Connecting_to_Firefox_for_Android">Connecting to Firefox for Android</h3> + +<p>From Firefox 36 onwards Android devices connected over USB and running Firefox for Android appear as a runtime under "USB devices". See the article on <a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">connecting to Firefox for Android from WebIDE</a>.</p> + +<p>Before Firefox 36, you can <a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">connect to Firefox for Android without using WebIDE at all</a>, or can use WebIDE by setting up a <a href="/en-US/docs/Tools/WebIDE#Remote_runtime">custom remote runtime</a>.</p> + +<h3 id="Adding_a_Simulator">Adding a Simulator</h3> + +<p><span style="line-height: 1.5;">The <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> is <span style="line-height: 1.5;">a version of the higher layers of Firefox OS</span> that simulates a Firefox OS device, but runs on the desktop</span><span style="line-height: 1.5;">. </span><span style="line-height: 1.5;">It runs in a window the same size as a Firefox OS device, includes the Firefox OS user interface and built-in apps, and simulates many of the Firefox OS device APIs.</span></p> + +<p><span style="line-height: 1.5;">This means that in many cases, you don't need a real device to test and debug your app. </span></p> + +<p>The Simulator doesn't ship inside Firefox but as a Firefox <a href="/en-US/Add-ons">add-on</a>. If you click "Install Simulator" in the Runtimes dropdown menu, you will go to a page from which you can install Simulators for various versions of Firefox OS.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8039/webide-install-simulator.png" style="width: 720px; height: 560px; display: block; margin-left: auto; margin-right: auto;">You can install as many as you like. Be patient, though: the Simulator may take a few minutes to download. Once you've installed some Simulators you can close this "Extra Components" window, and the Simulators you've installed appear as options in the Runtimes dropdown menu:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8047/webide-select-runtime-keon-simulator.png" style="width: 712px; height: 559px; display: block; margin-left: auto; margin-right: auto;">To learn more about the Simulator, see its <a href="/en-US/docs/Tools/Firefox_OS_Simulator">documentation page</a>.</p> + +<h3 id="Custom_runtimes">Custom runtimes</h3> + +<h4 id="Remote_runtime">Remote runtime</h4> + +<p>With a custom remote runtime you can use an arbitrary hostname and port to connect to the remote device.</p> + +<p>Under the hood, Firefox OS devices and Android devices connect to the desktop using a program called the Android Debug Bridge, or <a href="http://developer.android.com/tools/help/adb.html">ADB</a>. By default, WebIDE uses an add-on called the ADB Helper: this simplifies the process for you by installing ADB and setting up port forwarding so the Firefox desktop tools can exchange messages with the device.</p> + +<p>This is convenient in most cases, but sometimes you might want to use ADB outside of WebIDE: for example, you might be running ADB directly from the command line. In that case you'll connect to the device by specifying a host and port using the <a href="http://developer.android.com/tools/help/adb.html#forwardports"><code>adb forward</code></a> command (example: <code>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</code>).<br> + <br> + If you then want to use WebIDE to connect as well, you should <a href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons#w_how-to-disable-extensions-and-themes">disable the ADB Helper add-on</a> and connect WebIDE using the Custom runtime option, entering the host and port that you passed to <code>adb forward</code> (example: <code>localhost:6000</code>).</p> + +<p>Also, before Firefox 36, the ADB Helper does not yet support connecting to Firefox for Android, so if you want to connect WebIDE to Firefox for Android, you'll need to set up your own port forwarding and use a custom runtime. <a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">See more about connecting to Firefox for Android using ADB prior to Firefox 36</a>.</p> + +<h4 id="Valence-enabled_runtimes">Valence-enabled runtimes</h4> + +<p>If you have the <a href="/en-US/docs/Tools/Valence">Valence</a> add-on installed, you'll see three additional runtimes:</p> + +<ul> + <li>Chrome on Android</li> + <li>Safari on iOS</li> + <li>Chrome Desktop</li> +</ul> + +<p>For instructions on how to connect to these runtimes, see the relevant entry in the <a href="/en-US/docs/Tools/Remote_Debugging">Remote Debugging</a> page.</p> + +<h2 id="Selecting_a_runtime">Selecting a runtime</h2> + +<p>Once you've set up a runtime you can select it using the "Select Runtime" menu.</p> + +<ul> + <li>If you select a Simulator, WebIDE launches the Simulator.</li> + <li>If you select a Firefox OS device WebIDE connects to the device. On the device a dialog will ask you to confirm that you wish to connect: press "OK".</li> +</ul> + +<p>Now the "play" button in the center of the WebIDE toolbar is enabled: click it to install and run the app in the selected runtime.</p> + +<h3 id="Runtime_menu_items">Runtime menu items</h3> + +<p>When a runtime is selected, the Runtimes dropdown menu has up to five extra items:</p> + +<dl> + <dt><strong>Runtime Info</strong></dt> + <dd>Information on the current runtime</dd> + <dt><strong>Permissions Table</strong></dt> + <dd>A table summarising <a href="/en-US/Apps/Build/App_permissions">app permissions</a> for the current runtime, indicating, for each API and each <a href="/en-US/Marketplace/Options/Packaged_apps#Types_of_packaged_apps">app type</a>, whether access is allowed (✓), denied (✗), or whether the user is prompted (!)</dd> +</dl> + +<dl> + <dt><strong>Device Preferences</strong></dt> + <dd>A table listing, and letting you edit, the preferences that are made available in the runtime via the <a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIPrefService">Preferences service</a>. These are platform-level configuration values exposing the same set of data as Firefox's about:config (but for the device). Because these preferences are highly security-sensitive, you need to disable the <a href="/en-US/docs/Tools/WebIDE#Unrestricted_app_debugging_%28including_certified_apps.2C_main_process.2C_etc.%29">DevTools restricted privileges setting</a> before you can modify them.</dd> + <dt><strong>Device Settings</strong> (new in Firefox 38/Firefox OS 3)</dt> + <dd>A table listing, and letting you edit, the settings that can be controlled in the Firefox OS Settings app. Most things on the device which have a UI control to change (volume, alarm, etc.) are found in Device Settings. Because these settings are less sensitive than the device preferences, you can modify them without removing the restricted privileges setting. However, since this feature is new in Gecko 38 you need the WebIDE in Firefox 38 and a nightly build of Firefox OS or the Simulator.</dd> + <dt><strong>Screenshot</strong></dt> + <dd>A command to take a screenshot from the runtime.</dd> +</dl> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10185/webide-runtimes.png" style="width: 833px; height: 601px; display: block; margin-left: auto; margin-right: auto;"></p> + +<p> </p> + +<h2 id="Creating_and_opening_apps">Creating and opening apps</h2> + +<p>Under the "Open App" menu you get three options: create a new app, open a packaged app, and open a hosted app:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8049/webide-open-app-empty.png" style="width: 723px; height: 562px; display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Create_a_new_app">Create a new app</h3> + +<p>Select "New App..." to create a new app. You'll see a dialog offering you a choice between two templates, "Privileged Empty App" and "Privileged App".</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8053/webide-new-app.png" style="width: 739px; height: 591px; display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Both templates are from Mozilla's <a href="https://github.com/mozilla/mortar">app template collection</a>, and provide you with the basic structure you need to get started. The "Privileged App" shows how an app can use permissions to load cross-origin content.</p> + +<p>Once you've selected a template you'll be asked to name the app and select a directory to store the files, and then the new app is opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p> + +<h3 id="Open_a_packaged_app">Open a packaged app</h3> + +<p>Select "Open Packaged App..." to open a <a href="/en-US/Marketplace/Options/Packaged_apps">packaged app</a>. You'll be asked to select a directory containing the app's <a href="/en-US/Apps/Build/Manifest">manifest</a>, and the app will be opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p> + +<h3 id="Open_a_hosted_app">Open a hosted app</h3> + +<p>Select "Open Hosted App..." to open a <a href="/en-US/Marketplace/Options/Hosted_apps">hosted app</a>. You'll be asked to enter a URL pointing to the app's <a href="/en-US/Apps/Build/Manifest">manifest</a>, and the app will be opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p> + +<h2 id="Editing_apps">Editing apps</h2> + +<p>The project editor provides an environment for editing apps. There's a tree view on the left of all the files in the app: you can add and delete files here using a context menu. There's an editor pane on the right.</p> + +<h3 id="The_app_summary_page">The app summary page</h3> + +<p>When you first open or create an app, the editor pane is occupied by the app summary page, which is as shown below:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8055/webide-new-app-editor.png" style="width: 846px; height: 625px; display: block; margin-left: auto; margin-right: auto;"></p> + +<p>You can always get back to the app summary page by clicking on the root of the tree on the left.</p> + +<h3 id="Manifest_validation">Manifest validation</h3> + +<p>WebIDE automatically checks the manifest for certain common problems. If it finds a problem it indicates that the app is invalid and describes the problem in the app's summary:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8063/webide-invalid-manifest.png" style="width: 847px; height: 626px; display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Of course, you can edit the <a href="/en-US/Apps/Build/Manifest">manifest.webapp</a> file right in the project editor as well.</p> + +<h3 id="The_source_editor">The source editor</h3> + +<p>WebIDE uses the <a href="http://codemirror.net/">CodeMirror</a> source editor.</p> + +<h4 id="Source_editor_shortcuts">Source editor shortcuts</h4> + +<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}</p> + +<h4 id="Code_completion">Code completion</h4> + +<p>When editing CSS and JavaScript, the editor provides autocomplete suggestions. CSS autocompletion is always enabled:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8057/webide-css-autocomplete.png" style="width: 849px; height: 628px; display: block; margin-left: auto; margin-right: auto;">To display autocomplete suggestions in JavaScript press Control + Space:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8059/webide-js-autocomplete.png" style="width: 867px; height: 653px; display: block; margin-left: auto; margin-right: auto;"></p> + +<h4 id="Inline_documentation">Inline documentation</h4> + +<p>The editor also shows inline documentation for JavaScript. Press Shift + Space to see a popup containing documentation for the symbol your cursor is on:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8061/webide-js-inline-docs.png" style="width: 872px; height: 652px; display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Clicking the <code>[docs]</code> link in the popup will take you to the MDN page for the symbol.</p> + +<h4 id="Saving_files">Saving files</h4> + +<p>For changes to your files to take effect you need to save them. Files with unsaved changes get an asterisk next to their name in the tree view, and you can save files using the menu or Control+S (Command+S on Mac OS X).</p> + +<h3 id="Removing_projects">Removing projects</h3> + +<p>To remove an app from WebIDE, go to the <a href="/en-US/docs/Tools/WebIDE#The_app_summary_page">app summary page</a> and click "Remove Project".</p> + +<h2 id="Running_a_custom_build_step">Running a custom build step</h2> + +<div class="geckoVersionNote"> +<p>New in Firefox 37.</p> +</div> + +<p>For some use cases you need to run a custom command before pushing your app to the device. For example, you might want to satisfy JavaScript dependencies or minify CSS, or use WebIDE to develop Gaia apps or Cordova apps, both of which require a custom build step.</p> + +<p>From Firefox 37 you can do this by including a file called "package.json" in the root of your app. This is the same file that's used to <a href="https://docs.npmjs.com/files/package.json">package a node.js library</a>, so you might already have one in the root of your project. If you don't, you can create one for this purpose.</p> + +<p>Inside package.json, WebIDE looks for a property called "webide". The table below summarises the syntax of "webide":</p> + +<table class="standard-table"> + <tbody> + <tr> + <td style="width: 10%;"><code>webide</code></td> + <td style="width: 10%;"> </td> + <td style="width: 10%;"> </td> + <td style="width: 70%;"> + <p>Object containing instructions for WebIDE.</p> + + <p>This may contain two properties, both optional: "<code>prepackage</code>" and "<code>packageDir</code>".</p> + </td> + </tr> + <tr> + <td> </td> + <td><code>prepackage</code></td> + <td> </td> + <td> + <p>Specifies a command-line command for WebIDE to run before pushing the app to the runtime.</p> + + <p>This may be a string, in which case the command is just executed as-is, or may be an object which must contain "<code>command</code>", and may contain any of "<code>env</code>", "<code>args</code>", and "<code>cwd</code>".</p> + </td> + </tr> + <tr> + <td> </td> + <td> </td> + <td><code>command</code></td> + <td> + <p>The command to execute in the command shell.</p> + + <p>For example: "<code>echo</code>".</p> + </td> + </tr> + <tr> + <td> </td> + <td> </td> + <td><code>env</code></td> + <td> + <p>Any environment variables to set.</p> + + <p>This is specified as an array of strings in the form "NAME=value". For example: <code>["NAME=world"]</code></p> + </td> + </tr> + <tr> + <td> </td> + <td> </td> + <td><code>args</code></td> + <td> + <p>Any arguments to pass along with the command.</p> + + <p>This is specified as an array of strings.</p> + </td> + </tr> + <tr> + <td> </td> + <td> </td> + <td><code>cwd</code></td> + <td> + <p>The directory from which to run the command.</p> + + <p>This may be absolute or relative to the current directory.</p> + </td> + </tr> + <tr> + <td> </td> + <td><code>packageDir</code></td> + <td> </td> + <td> + <p>The directory from which WebIDE should look for the app to push to the runtime.</p> + + <p>Use this if you want the project in WebIDE to be the source from which to build a packaged app. The build step specified in <code>prepackage</code> would place the built app in an output directory, you will specify the output directory in <code>packageDir</code>, and WebIDE will install the app from that output directory rather than the project directory.</p> + + <p>This property is optional, and if it's omitted WebIDE will package the app from the project root, just as if package.json was omitted.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Examples">Examples</h3> + +<p>A "package.json" to build a Gaia app:</p> + +<pre class="brush: json">{ + "webide": { + "prepackage": { + "command": "make", + "env": ["APP=settings"], + "cwd": "../.." + }, + "packageDir": "../../build_stage/settings/" + } +}</pre> + +<p>A "package.json" for working with Cordova:</p> + +<pre class="brush: json">{ + "webide": { + "prepackage": "cordova prepare", + "packageDir": "./platforms/firefoxos/www" + } +}</pre> + +<h2 id="Running_and_debugging_apps">Running and debugging apps</h2> + +<p>When you're ready to run the app, you need to <a href="/en-US/docs/Tools/WebIDE#Selecting_a_runtime">select a runtime from the "Select Runtime" dropdown menu</a>. If you don't have any available runtimes here, find out how to add some in <a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">Setting up runtimes</a>.</p> + +<p>The "play" button in the center of the WebIDE toolbar is now enabled: click it to install and run the app in the selected runtime:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8065/webide-running.png" style="width: 1314px; height: 718px; display: block; margin-left: auto; margin-right: auto;">To debug the app, click the "Pause" button and the Developer Tools <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a> appears, connected to your app:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8067/webide-debugging.png" style="width: 1310px; height: 688px; display: block; margin-left: auto; margin-right: auto;"></p> + +<div class="geckoVersionNote"> +<p>From Firefox 36 onwards, the "Pause" button is replaced with a wrench icon.</p> +</div> + +<p>Exactly which tools you'll have available depends on the runtime, but you will at least have the basics: the <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="/en-US/docs/Tools/Web_Console">Console</a>, <a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a>, <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>, <a href="/en-US/docs/Tools/Profiler">Profiler</a> and <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>. Just as in a web page, any changes you make in the tools are visible immediately in the app, but are not persistent. Conversely, any changes you make in the editor pane can be saved straight back to disk, but are not visible without restarting the app.</p> + +<h3 id="Unrestricted_app_debugging_(including_certified_apps_main_process_etc.)">Unrestricted app debugging (including certified apps, main process, etc.)</h3> + +<p>You can run the debugger against the simulator, b2g desktop, or a real device.</p> + +<p>With the Simulator, if you click on the app dropdown menu while the runtime is selected, you can see and debug not only your app but all apps running in that runtime, including <a href="/en-US/Marketplace/Options/Packaged_apps#Certified_app">certified apps</a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8069/webide-debugging-builtin.png" style="width: 1302px; height: 681px; display: block; margin-left: auto; margin-right: auto;"></p> + +<p><br> + However, when connecting to a real device we have a security policy in force:</p> + +<ul> + <li>On devices running Firefox OS versions up to 2.1, all installed apps on device that are <strong>not</strong> certified apps (so privileged and web / regular apps) appear in "Runtime Apps" by default.</li> + <li>On Firefox 2.1 and above, we changed this so that only apps installed via DevTools / WebIDE appear in "Runtime Apps", regardless of app type. We did this to protect potentially sensitive data that could be present in apps.</li> +</ul> + +<p>To remove this restriction:</p> + +<ul> + <li>The device must be running a development build of Firefox OS 1.2+</li> + <li>You must disable the <code>DevTools restricted privileges</code> setting.</li> +</ul> + +<p>To disable <code>DevTools restricted privileges</code>, connect to the runtime, and then, in the menu, go to <code>Runtime > Runtime Info</code>. The path then differs depending on what you are debugging against:</p> + +<ul> + <li>Real device + <ul> + <li>If it can be rooted, clicking <code>"request higher privileges"</code> will enable unrestricted app debugging (Firefox OS will restart). You may need to select your device again in the 'Select Runtime' drop down.</li> + </ul> + </li> + <li>Simulator + <ul> + <li>The simulators come with unrestricted app debugging enabled by default.</li> + </ul> + </li> + <li>B2G desktop + <ul> + <li>Manually edit the B2G desktop client <a href="https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager#Using_the_B2G_desktop_client">preferences</a> before connecting to enable unrestricted app debugging.</li> + </ul> + </li> +</ul> + +<p>Now (or after a restart of the B2G desktop client) in WebIDE you should see all the apps on the device.</p> + +<div class="note"> +<p><strong>Note</strong>: As indicated above, to enable unrestricted privileges on a real device through WebIDE you'll need a rooted device. There is however a developer setting available in Firefox OS 2.2 onwards called <a href="/en-US/Firefox_OS/Debugging/Developer_settings#Reset_and_enable_full_DevTools">Reset and enable full DevTools</a> — when activated this will wipe all user data (for security reasons), reset the device, and enable unrestricted priviledges on <em>any</em> device.</p> +</div> + +<h2 id="Monitoring_performance">Monitoring performance</h2> + +<p>If you're interested in the performance of your apps, there are a few ways to measure their impact on the runtime in WebIDE:</p> + +<ul> + <li>The <a href="/docs/Tools/WebIDE/Monitor">Monitor</a> panel offers a good overview of a device's performance. This can help you detect problems, e.g. a sudden, excessive increase in an app's memory usage (leak).</li> + <li>The <a href="/docs/Tools/Profiler">Profiler</a> tool gives you a way to analyze a single app's footprint in great detail. This is especially useful when investigating a known performance problem.</li> +</ul> + +<h2 id="Troubleshooting">Troubleshooting</h2> + +<p>If you have any problems working with WebIDE, see the <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Troubleshooting</a> page.</p> + +<p> </p> + +<p> </p> diff --git a/files/pl/narzędzia/webide/troubleshooting/index.html b/files/pl/narzędzia/webide/troubleshooting/index.html new file mode 100644 index 0000000000..52d8e180d9 --- /dev/null +++ b/files/pl/narzędzia/webide/troubleshooting/index.html @@ -0,0 +1,152 @@ +--- +title: WebIDE Troubleshooting +slug: Narzędzia/WebIDE/Troubleshooting +translation_of: Archive/WebIDE/Troubleshooting +--- +<p><span id="result_box" lang="pl"><span title="Connecting a Firefox OS device + +">Podłączanie urządzenia Firefox OS</span><br> + <br> + <span title="If you're trying to connect a Firefox OS device to WebIDE and it doesn't show up, here are some things you can try: + + ">Jeśli próbujesz podłączyć urządzenie Firefox OS do WebIDE i nie pokazuje się, oto kilka rzeczy, które można wypróbować:<br> + <br> + </span><span title="Check your Firefox OS version: make sure your device is running Firefox OS 1.2/Boot2Gecko 1.2 or higher.">Sprawdź wersję Firefox OS: upewnij się, że urządzenie działa Firefox OS 1.2 / Boot2Gecko 1.2 lub wyższej. </span><span title="To check the version, go to the Settings app on the device, then Device Information > Software.">Aby sprawdzić wersję, przejdź do aplikacji Ustawienia urządzenia, a następnie Information Device> Software. </span><span title="If you don't have a high enough version, find your device in the developer phone guide and follow the instructions for upgrading. + ">Jeśli nie masz wystarczająco wysoki wersji, znaleźć urządzenie w przewodniku telefonu dewelopera i postępuj zgodnie z instrukcjami rozbudowy.<br> + </span><span title="Enable remote debugging: in the Settings app on the device, go to Device information > More information > Developer. + ">Włączanie zdalnego debugowania: w aplikacji Ustawienia na urządzeniu, przejdź do Informacje o urządzeniu> więcej informacji> Developer.<br> + </span><span title='Firefox OS 1.3 and earlier: "Remote Debugging" is just a simple checkbox.'>Firefox OS 1.3 i wcześniejsze: "Zdalne debugowanie" jest tylko proste pole wyboru. </span><span title="Check the box. + ">Zaznacz pole.<br> + </span><span title='Firefox OS 1.4 and later: "Remote Debugging" asks you to enable for just ADB, or for ADB and DevTools.'>Firefox OS 1.4, a później: "Zdalne debugowanie" prosi o umożliwienie za jedyne ADB, lub ADB i DevTools. </span><span title='Select "ADB and DevTools". + '>Wybierz "ADB i DevTools".<br> + </span><span title="Disable screen lock on your device: in the Settings app on the device, go to Screen Lock and unchecking the Lock Screen checkbox.">Wyłącz blokadę ekranu w urządzeniu: w aplikacji Ustawienia na urządzeniu, przejdź do ekranu blokady i odznaczając pole wyboru Zablokuj ekran. </span><span title="This is a good idea because when the screen gets locked, the phone connection gets lost, meaning it is no longer available for debugging. + ">To jest dobry pomysł, bo gdy ekran zostanie zamknięty, połączenie telefoniczne zostanie utracone, co oznacza, że nie jest już dostępny do debugowania.<br> + </span><span title="Make sure you haven't connected an Android phone at the same time as the Firefox OS phone to your computer. + ">Upewnij się, że nie podłączono telefonu Android w tym samym czasie, co telefon Firefox OS na komputerze.<br> + </span><span title="Check the USB cable you are using: + ">Sprawdź kabel USB, którego używasz:<br> + </span><span title="Try unplugging and replugging in the USB cable. + ">Spróbuj odłączyć i ponownie podłączyć kabel USB.<br> + </span><span title="Try plugging the USB cable into a different port on your computer.">Spróbuj podłączyć kabel USB do innego portu w komputerze. </span><span title="You may have to alternate between ports. + ">Być może trzeba będzie przełączać się między portami.<br> + </span><span title="Try a different USB cable.">Spróbuj użyć innego kabla USB. </span><span title="The cables that come with phones are often of poor quality and fail often. + ">Kable, które pochodzą z telefonów są często słabej jakości i nie często.<br> + </span><span title="Try a shorter USB cable.">Spróbuj użyć krótszego kabla USB. </span><span title="Long USB cables have been known to not work so well. + ">Długie kable USB były znane nie działa tak dobrze.<br> + </span><span title="Try disabling and re-enabling Remote Debugging in the Settings app on the device. + ">Spróbuj wyłączyć i ponownie umożliwiając zdalne debugowanie w aplikacji Ustawienia w urządzeniu.<br> + </span><span title="If you disabled the ADB Addon Helper, did you successfully run the adb forward command? + ">Jeśli wyłączona ADB Addon Helper, czy z powodzeniem uruchomić adb komendy naprzód?<br> + </span><span title="If you use Linux: + ">Jeśli używasz Linuksa:<br> + </span><span title="Make sure you added a udev rules file, as documented in step 3 of this guide to setting up an Android device.">Upewnij się, że dodał plik zasadami udev, zgodnie z zapisem w punkcie 3 niniejszej instrukcji do konfigurowania urządzenia z systemem Android. </span><span title='The idVendor attribute to use for the Geeksphone is "05c6", and this page lists other idVendor values.'>IdVendor atrybutów użyć do Geeksphone jest "05c6", a strona ta wymienia inne wartości idVendor. </span><span title="Next, run the adb devices to make sure your device is in the list.">Następnie należy uruchomić urządzenia ADB upewnić się, że urządzenie znajduje się na liście. </span><span title='If device appears to be "no permission", you need to restart adb server (eg adb kill-server;adb start-server). + '>Jeśli urządzenie wydaje się być "brak uprawnień", należy ponownie uruchomić serwer adb (np adb kill-server; adb start serwera).<br> + </span><span title="If you use Windows: + ">Jeśli używasz systemu Windows:<br> + </span><span title="You need to install drivers, as documented in step 3 of this guide to setting up an Android device.">Musisz zainstalować sterowniki, zgodnie z zapisem w punkcie 3 niniejszej instrukcji do konfigurowania urządzenia z systemem Android. </span><span title="You can find drivers for Geeksphone devices on the Geeksphone web site and drivers for Google devices on Google web site.">Możesz znaleźć sterowniki do urządzeń Geeksphone na stronie internetowej Geeksphone i sterowników dla urządzeń Google na stronie internetowej Google. </span><span title="Windows 8 by default will not let you install unsigned drivers.">Windows 8 domyślnie nie pozwala zainstalować niepodpisane sterowniki. </span><span title='See this tutorial on "How to install an unsigned driver on Windows 8". + '>Zobacz ten tutorial na temat "Jak zainstalować niepodpisane sterowniki na Windows 8".<br> + </span><span title="If WebIDE can't see your device after following all the steps, you may have to edit adb_usb.ini. + ">Jeśli WebIDE nie widzi urządzenia po wykonaniu wszystkich kroków, być może trzeba będzie edytować adb_usb.ini.<br> + </span><span title="If you use Mac OS X: + ">Jeśli używasz Mac OS X:<br> + </span><span title="If you're getting timeout errors connecting to both simulators and real devices, you may be unable to connect to localhost due to an empty /etc/hosts file.">Jeśli otrzymujesz błędy limitu czasu z połączeniem obu symulatorów i prawdziwych urządzeń, możesz nie być w stanie połączyć się z localhost z powodu pustego pliku / etc / hosts. </span><span title="You can solve the problem by populating the file and flushing DNS cache as described here. + ">Można rozwiązać ten problem poprzez stworzenie pliku i płukania DNS cache, jak opisano tutaj.<br> + </span><span title="If you're an EasyTether user, you will need to uninstall or disable EasyTether: sudo kextunload /System/Library/Extensions/EasyTetherUSBEthernet.kext + +">Jeśli jesteś EasyTether użytkownika, należy odinstalować lub wyłączyć EasyTether: sudo kextunload /System/Library/Extensions/EasyTetherUSBEthernet.kext</span><br> + <br> + <span title="Unrestricted debugging (including certified apps, built-in apps, apps already installed on a device) + +">Nieograniczony debugowania (w tym certyfikowanych aplikacji, wbudowane aplikacje, aplikacje już zainstalowane na urządzeniu)</span><br> + <br> + <span title="If you are finding that you can't debug certified apps, built-in apps, or apps already installed on a real device, then you may be coming across WebIDE's restricted privileges security policy.">Jeśli stwierdzenie, że nie można debugować certyfikowane aplikacje, wbudowane aplikacje lub aplikacje już zainstalowane na rzeczywistym urządzeniu, a następnie może być napotykając ograniczonej polityki bezpieczeństwa przywileje WebIDE za. </span><span title="To find out more, see the section on Unrestricted app debugging (including certified apps, main process, etc.). +">Aby dowiedzieć się więcej, zobacz sekcję Nieograniczony app debugowania (w tym certyfikowanych aplikacji, głównego procesu, itp).</span><br> + <span title="Connecting to Firefox for Android + +">Podłączanie do Firefoksa dla Androida</span><br> + <br> + <span title="If you're trying to connect to a Firefox instance running on the Android OS and it doesn't show up, here are some things you can try: + + ">Jeśli próbujesz połączyć się z systemem Firefox instancji na Android OS i nie pokazuje się, oto kilka rzeczy, które można wypróbować:<br> + <br> + </span><span title="Check your Firefox version: make sure your device is running Firefox 36 or higher.">Sprawdź wersję Firefox: upewnij się, że urządzenie działa Firefox 36 lub wyższej. </span><span title="WebIDE will not detect older versions automatically, so you need to enable port forwarding and connect to the device port - follow the instructions here. + ">WebIDE nie wykrywa starsze wersje automatycznie, więc musisz włączyć przekierowanie portów i podłączyć do portu urządzenia - postępuj zgodnie z instrukcjami tutaj.<br> + </span><span title="Make sure you have enabled remote debugging in Firefox: open Firefox for Android, open its menu, select Settings, and then check the checkbox at Developer Tools > Remote debugging. + ">Upewnij się, że masz włączone zdalne debugowanie Firefox: otwarty Firefox dla Androida, otwórz jego menu, wybierz Ustawienia, a następnie zaznacz pole wyboru przy Developer Tools> zdalnego debugowania.<br> + </span><span title="Make sure that USB debugging is allowed in the device's developer settings + ">Upewnij się, że debugowanie USB jest dozwolone w ustawieniach deweloperskich przyrządu<br> + </span><span title="If you still do not see your device in the WebIDE window, try toggling Remote debugging on the phone. + ">Jeśli nadal nie widać urządzenia w oknie WebIDE spróbuj przełączyć zdalne debugowanie na telefon.<br> + </span><span title="Disconnect your device from your computer and turn off Remote debugging on the phone. + ">Odłącz urządzenie od komputera i wyłączyć zdalne debugowanie na telefon.<br> + </span><span title="Reconnect the device and turn on Remote debugging - this restarts the debugger instance on the phone. + ">Podłącz ponownie urządzenie i włączyć zdalnego debugowania - to restartuje instancji debugger na telefon.<br> + </span><span title="Try connecting via WebIDE again. + +">Spróbuj podłączyć poprzez WebIDE ponownie.</span><br> + <br> + <span title="Connecting to other browsers (Chrome, Safari) + +">Podłączanie do innych przeglądarek (Chrome, Safari)</span><br> + <br> + <span title="WebIDE makes use of Valence (formerly Firefox Tools Adapter) to reach other browsers, like Chrome and Safari. + +">WebIDE korzysta z Valence (dawniej Firefox Narzędzia Adapter) dotrzeć do innych przeglądarek, takich jak Chrome i Safari.</span><br> + <br> + <span title="If you are having trouble connecting to these other browsers, check the setup steps and other notes for those browsers on the Valence page. +">Jeśli występują problemy z logowaniem do innych przeglądarek, sprawdź kroki instalacyjne i inne notatki dla tych przeglądarek na stronie Valence.</span><br> + <span title="Unable to load project list + +">Nie można załadować listę projektu</span><br> + <br> + <span title='If you open WebIDE in one version of Firefox, and then downgrade to a previous Firefox version with the same profile, you may see the error "Unable to load project list" when opening WebIDE in the earlier Firefox version. + +'>Jeśli otwarta WebIDE w jednej wersji Firefoksa, a potem downgrade do poprzedniej wersji Firefoksa o tym samym profilu, możesz zobaczyć błąd "Nie można załadować listę projektu" podczas otwierania WebIDE w starszej wersji Firefoksa.</span><br> + <br> + <span title="This can occur when the storage system that WebIDE uses (IndexedDB) needs to move or restructure its internal files for the newer Firefox version.">Może się to zdarzyć, gdy system pamięci masowej, który WebIDE zastosowań (IndexedDB) musi przenieść lub zrestrukturyzować swoje wewnętrzne pliki do nowszej wersji przeglądarki Firefox. </span><span title="The project list then becomes effectively inaccessible to older versions of Firefox. + +">Lista projekt staje się skuteczne niedostępne dla starszych wersji Firefoksa.</span><br> + <br> + <span title="No data has been lost, but you will need to keep using the newest version of Firefox that was used with your profile to get the project list back. + +">Żadne dane nie zostały utracone, ale trzeba zachować przy użyciu najnowszej wersji Firefoksa, który został użyty w swoim profilu, aby otrzymać listę projektów powrotem.</span><br> + <br> + <span title="If really want to use the older version of Firefox, you can attempt to delete just the project list in the following way, but this is unsupported and could result in the further problems or additional data loss: + + ">Jeśli naprawdę chcesz używać starszej wersji Firefoksa, można próbować usunąć tylko listę projektów w następujący sposób, ale to nie jest obsługiwane i może doprowadzić do kolejnych problemów lub dodatkowych utraty danych:<br> + <br> + </span><span title="Close Firefox + ">Zamknij Firefox<br> + </span><span title="Find your Firefox profile directory + ">Znajdź swój Firefox katalogu profilu<br> + </span><span title="Find the storage folder inside the profile directory + ">Znajdź folder przechowywania wewnątrz katalogu profilu<br> + </span><span title="Under some part of this file tree, there should be files and/or directories that start with 4268914080AsptpcPerjo (a hashed name of the database) + ">Pod jakąś część tego pliku drzewa, nie powinno być pliki i / lub katalogi, które zaczynają 4268914080AsptpcPerjo (zakodowane nazwy bazy danych)<br> + </span><span title="Remove any such files and directories + ">Usuń wszystkie takie pliki i katalogi<br> + </span><span title="Start Firefox and WebIDE again + +">Uruchom ponownie program Firefox i WebIDE</span><br> + <br> + <span title="Enable logging + +">Włącz rejestrowanie</span><br> + <br> + <span title="You can also enable verbose logging to gather diagnostics: + + ">Można również włączyć pełne rejestrowanie na zebranie diagnostykę:<br> + <br> + </span><span title="Open about:config, and add a new preference called extensions.adbhelper@mozilla.org.sdk.console.logLevel, with the string value all, and set extensions.adbhelper@mozilla.org.debug to true. + ">Otwórz about: config, a następnie dodaj nowy preferencji nazwie extensions.adbhelper@mozilla.org.sdk.console.logLevel, z wartości ciągu wszystkich, i ustawić extensions.adbhelper@mozilla.org.debug true.<br> + </span><span title="In the Add-ons Manager, disable and then re-enable the ADB Helper add-on. + ">W Menedżerze dodatków, wyłączyć i ponownie włączyć ADB Pomocnik add-on.<br> + </span><span title="Open the Browser Console and you'll now see console messages prefixed with adb.">Otwórz przeglądarkę konsoli i będziesz teraz zobaczyć wiadomości konsoli z przedrostkiem adb. </span><span title="If the messages don't mean anything to you, ask for help. + +">Jeśli komunikat nie znaczy nic dla ciebie, poproś o pomoc.</span><br> + <br> + <span title="Get help + +">Uzyskaj pomoc</span><br> + <br> + <span title="Go to the #devtools room on IRC and we will try to help.">Idź do pokoju #devtools na IRC, a my postaramy się pomóc.</span></span></p> |