diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:45:47 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:45:47 +0100 |
commit | 5bb764e58e26e31488bb173b93b6f4d0ff916bf7 (patch) | |
tree | ee4b86a8e133da14b9c35585e45751f1152404d4 /files/el/εργαλεία | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-5bb764e58e26e31488bb173b93b6f4d0ff916bf7.tar.gz translated-content-5bb764e58e26e31488bb173b93b6f4d0ff916bf7.tar.bz2 translated-content-5bb764e58e26e31488bb173b93b6f4d0ff916bf7.zip |
unslug el: move
Diffstat (limited to 'files/el/εργαλεία')
-rw-r--r-- | files/el/εργαλεία/about_colon_debugging/index.html | 227 | ||||
-rw-r--r-- | files/el/εργαλεία/index.html | 230 |
2 files changed, 0 insertions, 457 deletions
diff --git a/files/el/εργαλεία/about_colon_debugging/index.html b/files/el/εργαλεία/about_colon_debugging/index.html deleted file mode 100644 index 0baeead55c..0000000000 --- a/files/el/εργαλεία/about_colon_debugging/index.html +++ /dev/null @@ -1,227 +0,0 @@ ---- -title: 'about:debugging' -slug: 'Εργαλεία/about:debugging' -translation_of: 'Tools/about:debugging' ---- -<p>{{ToolsSidebar}}</p> - -<p>The <code>about:debugging</code> page provides a single place from which you can attach the Firefox Developer Tools to a number of debugging targets. At the moment it supports three main sorts of targets: restartless add-ons, tabs, and workers.</p> - -<h2 id="Opening_the_aboutdebugging_page">Opening the about:debugging page</h2> - -<p>There are two ways to open <code>about:debugging</code>:</p> - -<ul> - <li>Type <code>about:debugging</code> in the Firefox URL bar.</li> - <li>In the <strong>Tools</strong> > <strong>Web Developer</strong> menu, click <strong>Remote Debugging</strong>.</li> -</ul> - -<p>When about:debugging opens, on the left-hand side, you'll see a sidebar with two options and information about your remote debugging setup:</p> - -<dl> - <dt>Setup</dt> - <dd>Use the Setup tab to configure the connection to your remote device.</dd> - <dt>This Firefox</dt> - <dd>Provides information about temporary extensions you have loaded for debugging, extensions that are installed in Firefox, the tabs that you currently have open, and service workers running on Firefox.</dd> -</dl> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16650/about_debugging_setup.png" style="border: 1px solid black; display: block; height: 751px; margin: 0px auto; width: 918px;"></p> - -<p>If your <code>about:debugging</code> page is different from the one displayed here, go to <code>about:config</code>, find and set the option <code>devtools.aboutdebugging.new-enabled</code> to <strong>true</strong>.</p> - -<h2 id="Setup_tab">Setup tab</h2> - -<h3 id="Connecting_to_a_remote_device">Connecting to a remote device</h3> - -<p>Firefox supports debugging over USB with Android devices, using the about:debugging page.</p> - -<p>Before you connect:</p> - -<ol> - <li>Enable Developer settings on your Android device.</li> - <li>Enable USB debugging in the Android Developer settings.</li> - <li>Enable <strong>Remote Debugging via USB</strong> in the Advanced Settings in Firefox on the Android device.</li> - <li>Connect the Android device to your computer using a USB cable.</li> -</ol> - -<p>If your device doesn't appear in the lefthand side of the about:debugging page, try clicking the <strong>Refresh devices</strong> button.</p> - -<p><strong>If it still doesn't appear</strong>, it may be because the link between your Android device and your computer is not authorized yet. First make sure you have installed <a href="https://developer.android.com/studio/command-line/adb.html">Android Debug Bridge</a> from Android Tools on your computer in order for it to be able to connect to your device. Next, disable every debugging setting already activated and repeat the steps described before. Your device should show a popup to authorize your computer to connect to it — accept this and then click the <strong>Refresh devices</strong> button again. The device should appear.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: You do not need to install the full Android Studio SDK. Only adb is needed.</p> -</div> - -<p>To start a debugging session, first open the page that you wish to debug and then click <strong>Connect</strong> next to the device name to open a connection to it. If the connection was successful, you can now click the name of the device to switch to a tab with information about the device.</p> - -<p><img alt="Screenshot of the debugging page for an Android device" src="https://mdn.mozillademos.org/files/16915/device_information.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p> - -<p>The information on this page is the same as the information on the <strong>This Firefox</strong> tab, but instead of displaying information for your computer, it displays the information for the remote device with the addition of a <strong>Tabs</strong> section with an entry for each of the tabs open on the remote device.</p> - -<p>Note: If the version of Firefox on your remote device is more than one major version older than the version running on your computer, you may see a message like the following:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16917/version_warning.png" style="display: block; margin: 0 auto;"></p> - -<p>In the image above, there are three tabs open: <strong>Network or cache Recipe</strong>, <strong>Nightly Home</strong>, and <strong>About Nightly</strong>. To debug the contents of one of these tabs, click the <strong>Inspect</strong> button next to its title. When you do, the Developer Tools open in a new tab.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16916/remote_debugger.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p> - -<p>Above the usual list of tools, you can see information about the device you are connected to, including the fact that you are connected (in this example) via USB, to Mozilla Firefox Nightly, on a Moto G(5), as well as the title of the page that you are debugging, and the address of the page.</p> - -<h3 id="Connecting_over_the_Network">Connecting over the Network</h3> - -<p>You can connect to a Firefox Debug server on your network, or on your debugging machine using the <strong>Network Location</strong> settings of the about:debugging page.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16942/network_location.png" style="display: block; margin: 0px auto;"></p> - -<p>Enter the location and port on which the debugger server is running. When you do, it is added to the Network locations list along with the devices, as shown below:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16943/connect_network_location.png" style="display: block; margin: 0 auto;"></p> - -<h2 id="This_Firefox">This Firefox</h2> - -<p>The <strong>This Firefox</strong> tab combines the features of Extensions, Tabs, and Workers into a single tab with the following sections:</p> - -<dl> - <dt>Temporary Extensions</dt> - <dd>Displays a list of the extensions that you have loaded using the <strong>Load Temporary Add-on</strong> button.</dd> - <dt>Extensions</dt> - <dd>This section lists information about the extensions that you have installed on your system.</dd> - <dt>Service Workers, Shared Workers, and Other Workers</dt> - <dd>There are three sections on this page that deal with Service Workers, Shared Workers, and Other Workers.</dd> -</dl> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16654/about_debugging_this_firefox.png" style="border: 1px solid black; display: block; height: 867px; margin: 0px auto; width: 1138px;"></p> - -<p>Whether internal extensions appear in the list on this page depends on the setting of the <code>devtools.aboutdebugging.showHiddenAddons</code> preference. If you need to see these extensions, navigate to <code>about:config</code> and make sure that the preference is set to <code>true</code>.</p> - -<h2 id="Extensions">Extensions</h2> - -<h3 id="Loading_a_temporary_extension">Loading a temporary extension</h3> - -<p>With the <strong>Load Temporary Add-on</strong> button you can temporarily load a web extension from a directory on disk. Click the button, navigate to the directory containing the add-on and select its manifest file. The temporary extension is then displayed under the <strong>Temporary Extensions</strong> header.</p> - -<p>You don't have to package or sign the extension before loading it, and it stays installed until you restart Firefox.</p> - -<p>The major advantages of this method, compared with installing an add-on from an XPI, are:</p> - -<ul> - <li>You don't have to rebuild an XPI and reinstall when you change the add-on's code;</li> - <li>You can load an add-on without signing it and without needing to disable signing.</li> -</ul> - -<p>Once you have loaded a temporary extension, you can see information about it and perform operations on it.</p> - -<p><img alt="Screenshot of the debugging information panel for a temporary extension" src="https://mdn.mozillademos.org/files/16652/temporary_extension.png" style="display: block; height: 322px; margin: 0 auto; width: 680px;"></p> - -<p>You can use the following buttons:</p> - -<dl> - <dt>Inspect</dt> - <dd>Loads the extension in the debugger.</dd> - <dt>Reload</dt> - <dd>Reloads the temporary extension. This is handy when you have made changes to the extension.</dd> - <dt>Remove</dt> - <dd>Unloads the temporary extension.</dd> -</dl> - -<p>Other information about the extension is displayed:</p> - -<dl> - <dt>Location</dt> - <dd>The location of the extension's source code on your local system.</dd> - <dt>Extension ID</dt> - <dd>The temporary ID assigned to the extension.</dd> - <dt>Internal UUID</dt> - <dd>The internal UUID assigned to the extension.</dd> - <dt>Manifest URL</dt> - <dd>If you click the link, the manifest for this extension is loaded in a new tab.</dd> -</dl> - -<h3 id="Updating_a_temporary_extension">Updating a temporary extension</h3> - -<p>If you install an extension in this way, what happens when you update the extension?</p> - -<ul> - <li>If you change files that are loaded on demand, like <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> or <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2">popups</a>, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown.</li> - <li>For other changes, click the <strong>Reload</strong> button. This does what it says: - <ul> - <li>Reloads any persistent scripts, such as <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a></li> - <li>Parses the <code>manifest.json</code> file again, so changes to <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> or any other keys take effect</li> - </ul> - </li> -</ul> - -<h3 id="Installed_Extensions">Installed Extensions</h3> - -<p>The permanently installed extensions are listed in the next section, <strong>Extensions</strong>. For each one, you see something like the following:</p> - -<p><img alt="Screenshot of the debugging information panel for an installed extension" src="https://mdn.mozillademos.org/files/16651/installed_extension.png" style="display: block; margin: 0 auto;"></p> - -<p>The <strong>Inspect</strong> button, and the <strong>Extension ID</strong> and <strong>Internal UUID</strong> fields are the same as for temporary extensions.</p> - -<p>Just as it does with temporarily loaded extensions, the link next to <strong>Manifest URL</strong> opens the loaded manifest in a new tab.</p> - -<div class="note"> -<p><strong>Note: </strong>It's recommended that you use the Browser Toolbox, not the Add-on Debugger, for debugging WebExtensions. See <a href="/en-US/Add-ons/WebExtensions/Debugging">Debugging WebExtensions</a> for all the details.</p> -</div> - -<p>The Add-ons section in about:debugging lists all web extensions that are currently installed. Next to each entry is a button labeled <strong>Inspect</strong>.</p> - -<div class="blockIndicator note"> -<p><strong>Note: </strong>This list may include add-ons that came preinstalled with Firefox.</p> -</div> - -<p>If you click <strong>Inspect</strong>, the <a href="/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> will start in a new tab.</p> - -<p>{{EmbedYouTube("efCpDNuNg_c")}}</p> - -<p>See the page on the <a href="/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> for all the things you can do with this tool.</p> - -<h2 id="Workers">Workers</h2> - -<p>The Workers page shows your workers, categorised as follows:</p> - -<ul> - <li>All registered <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a></li> - <li>All registered <a href="/en-US/docs/Web/API/SharedWorker">Shared Workers</a></li> - <li>Other workers, including <a href="/en-US/docs/Web/API/ChromeWorker">Chrome Workers</a> and <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Dedicated_workers">Dedicated Workers</a></li> -</ul> - -<p>You can connect the developer tools to each worker, and send push notifications to service workers.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16657/about_debugging_workers.png" style="border: 1px solid black; display: block; height: 642px; margin-left: auto; margin-right: auto; width: 567px;"></p> - -<h3 id="Service_worker_state">Service worker state</h3> - -<p>The list of service workers shows the state of the service worker in its <a href="https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle">lifecycle</a>. Three states are possible:</p> - -<ul> - <li><em>Registering</em>: this covers all states between the service worker's initial registration, and its assuming control of pages. That is, it subsumes the <em>installing</em>, <em>activating</em>, and <em>waiting</em> states.</li> - <li><em>Running</em>: the service worker is currently running. It's installed and activated, and is currently handling events.</li> - <li><em>Stopped</em>: the service worker is installed and activated, but has been terminated after being idle.</li> -</ul> - -<p><img alt="Screenshot of the debugging panel for a service worker that is in the Running state" src="https://mdn.mozillademos.org/files/16659/sample_service_worker.png" style="display: block; height: 237px; margin-left: auto; margin-right: auto; width: 556px;"></p> - -<div class="note"> -<p>This section uses a simple ServiceWorker demo, hosted at <a href="https://serviceworke.rs/push-simple/">https://serviceworke.rs/push-simple/</a>.</p> -</div> - -<h3 id="Unregistering_service_workers">Unregistering service workers</h3> - -<p>Click the <strong>Unregister</strong> button to unregister the service worker.</p> - -<h3 id="Sending_push_events_to_service_workers">Sending push events to service workers</h3> - -<p>To debug push notifications, you can set a breakpoint in the <a href="/en-US/docs/Web/API/PushEvent">push event</a> listener. However, you can also debug push notifications locally, without needing the server. Click the <strong>Push</strong> button to send a push event to the service worker.</p> - -<h3 id="Service_workers_not_compatible">Service workers not compatible</h3> - -<div> -<p>A warning message is displayed at the top of the <strong>This Firefox</strong> tab if service workers are incompatible with the current browser configuration, and therefore cannot be used or debugged.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16655/worker_warning.png" style="display: block; height: 44px; margin: 0px auto; width: 551px;"></p> -</div> - -<p>Service workers can be unavailable if the <code>dom.serviceWorkers.enable</code> preference is set to false in <code>about:config</code>.</p> diff --git a/files/el/εργαλεία/index.html b/files/el/εργαλεία/index.html deleted file mode 100644 index a49c30e6ab..0000000000 --- a/files/el/εργαλεία/index.html +++ /dev/null @@ -1,230 +0,0 @@ ---- -title: Εργαλεία Προγραμματισμού του Firefox -slug: Εργαλεία -translation_of: Tools ---- -<div class="summary">Εξετάστε, επεξεργαστείτε και αποσφαλματώστε την HTML, την CSS και την JavaScript στον υπολογιστή και το κινητό</div> - -<div class="column-container zone-callout"><a href="https://www.mozilla.org/en-US/firefox/aurora/" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; 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;">Εγκατάσταση του Firefox Aurora</a> - -<h3 id="Τι_νέο_υπάρχει_στο_Aurora">Τι νέο υπάρχει στο Aurora;</h3> - -<p>Το Aurora είναι μια έκδοση προεπισκόπησης έκδοσης του Firefox, όπου μπορείτε να έχετε τα τελευταία χαρακτηριστικά πριν εκδοθούν. Το τρέχον Aurora περιλαμβάνει αυτές τις ενημερώσεις για τα εργαλεία προγραμματισμού:</p> - -<ul> - <li><a href="https://www.youtube.com/watch?v=y2LcsxE2pR0">Μοντέλο χρωματικής επισήμανσης κουτιού στην Σελίδα Επιθεωρητή</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Working_with_iframes">Υποστήριξη κονσόλας ιστού για την εκτέλεση JS σε frames</a></li> - <li>Βελτιώσεις στην οθόνη της κονσόλας ιστού: χρωματικές <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Highlighting_and_inspecting_nodes">επισημάνσεις κώδικα, χρωματικές επισημάνσεις κόμβων και επιθεώρηση</a></li> - <li>Βελτιώσεις θεμάτων της επιθεώρησης δικτύου, <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Network_request_fields"> μικρογραφίες εικόνων, προεπισκόπηση εικόνας</a>, <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Preview">HTML προεπισκόπηση</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console#Browser_Console_command_line">Η εισαγωγή της κονσόλας ιστού πρέπει τώρα να είναι ενεργοποιημένη στις Ρυθμίσεις</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools_Toolbox#Available_Toolbox_Buttons">Εικονίδια για το Scratchpad και άλλα εργαλεία είναι κρυμμένα ως προεπιλογή</a></li> -</ul> -</div> - -<p><img alt="" src="https://mdn.mozillademos.org/files/7307/inspector.png" style="display: block; height: 467px; margin-left: auto; margin-right: auto; width: 815px;"></p> - -<div class="column-container"> -<div class="column-half"> -<h2 id="Creating" name="Creating">Δημιουργία</h2> - -<p>Εργαλεία σύνταξης για ιστοσελίδες και εφαρμογές ιστού.</p> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Scratchpad" title="Tools/Scratchpad">Scratchpad</a></dt> - <dd>'Ενας text editor (επεξεργαστής κειμένου) ενσωματωμένος στον Firefox, ο οποίος σας επιτρέπει τη σύνταξη και την εκτελέση της JavaScript.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor">Επεξεργαστής στυλ</a></dt> - <dd>Δείτε και επεξεργαστείτε CSS styles για την τρέχουσα σελίδα.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Shader_Editor">Επεξεργαστής σκιών</a></dt> - <dd>Δείτε και επεξεργαστείτε τα vertex και fragment shaders που χρησιμοποιούνται από το <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd> -</dl> -</div> - -<div class="column-half"> -<h2 id="Exploring" name="Exploring">Εξερεύνηση και αποσφαλμάτωση</h2> - -<p>Ερευνείστε, ελέγξτε, και αποσφαλματώστε ιστοσελίδες και εφαρμογές ιστού.</p> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Κονσόλα ιστού</a></dt> - <dd>Δείτε τα μηνύματα που καταγράφονται σχετικά με μια ιστοσελίδα και αλληλεπιδράστε με την σελίδα χρησιμοποιώντας την JavaScript.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector">Επιθεωρητής σελίδας</a></dt> - <dd>Δείτε και αλλάξτε την σελίδα σε HTML και CSS.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger" title="Tools/Debugger">JavaScript διορθωτής σφαλμάτων κώδικα</a></dt> - <dd>Σταματείστε, ελέγξτε, ερευνείστε και αλλάξτε την JavaScript που τρέχει στην σελίδα.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor">Έλεγχος-Παρακολούθηση δικτύου</a></dt> - <dd>Δείτε τις απαιτήσεις του δικτύου που πραγματώνονται όταν φορτώνεται η σελίδα.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/GCLI">Εργαλειοθήκη προγραμματιστή</a></dt> - <dd>Μία γραμμή εντολών της επιφάνειας αλληλεπίδρασης για τα εργαλεία του προγραμματιστή.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/3D_View">Τρισδιάστατη (3D) εικόνα</a></dt> - <dd> Τρισδιάστατη (3D) θέαση της σελίδας.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Eyedropper">Eyedropper</a></dt> - <dd>Διαλέξτε ένα χρώμα από την σελίδα.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Working_with_iframes">Δουλέοντας με iframes</a></dt> - <dd>Πως να στοχοποιήσετε μια συγκεκριμένη iframe.</dd> -</dl> -</div> -</div> - -<hr> -<div class="column-container"> -<div class="column-half"> -<h2 id="Mobile" name="Mobile">Κινητά</h2> - -<p>Εργαλεία για προγραμματισμό σε κινητές συσκευές.</p> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager">Διαχειριστής Εφαρμογών</a></dt> - <dd>Σχεδιάστε και αναπτύξτε το λειτουργικό σύστημα (OS) Firefox .</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator" title="Tools/Firefox_OS_Simulator">Firefox OS εξομοιωτής</a></dt> - <dd>Τρέξτε και αποσφαλματώστε την εφαρμογή Firefox OS στον υπολογιστή σας, χωρίς να χρειάζετε να έχετε μια πραγματική συσκευή Firefox OS.</dd> - <dt><a href="https://developer.mozilla.org/en-us/docs/Tools/Responsive_Design_View">Εικόνα ανταπόκρισης σχεδίου</a></dt> - <dd>Δείτε πως η ιστοσελίδα ή η εφαρμογή θα έμοιαζε σε ένα διαφορετικό μέγεθος στην οθόνη χωρίς να χρειάζετε να αλλάξετε το μέγεθος του περιηγητή σας.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android" title="Firefox for Android">Αποσφαλμάτωση του Firefox για συσκευές Android</a></dt> - <dd>Συνδέστε την εργαλειοθήκη του προγραμματιστή με το Firefox για συσκευές Android.</dd> -</dl> -</div> - -<div class="column-half"> -<h2 id="Performance" name="Performance">Επιδόσεις</h2> - -<p>Διάγνωστε και επιδιορθώστε προβλήματα εκτέλεσης - αποδοτικότητας (επιδόσεων).</p> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance" title="Tools/Profiler">Ανάλυση προφίλ JavaScript </a></dt> - <dd>Ανακαλύψτε πού ο JavaScript κώδικας καταναλώνει χρόνο.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Paint_Flashing_Tool">Εργαλείο επισήμανσης χρώματος</a></dt> - <dd>Επισημαίνει τα μέρη της σελίδας που επαναχρωματίζονται σε απάντηση στα συμβάντα.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Reflow_events">Συμβάντα αναδιαμόρφωσης σύνδεσης</a></dt> - <dd>Δείτε συμβάντα αναδιαμόρφωσης στην κονσόλα ιστού.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Performance_analysis">Επιδόσεις δικτύου </a></dt> - <dd>Δείτε πόσο χρόνο χρειάζονται να φορτώσουν όλα τα μέρη του ιστότοπου .</dd> -</dl> -</div> -</div> - -<hr> -<div class="column-container"> -<div class="column-half"> -<h2 id="Αποσφαλματώτοντας_τον_περιηγητή">Αποσφαλματώτοντας τον περιηγητή</h2> - -<p>Κατεξοχήν (ώς προεπιλογή) τα εργαλεία του προγραμματιστή επισυνάπτονται σε μια ιστοσελίδα ή σε μια εφαρμογή ιστού. Μπορείτε όμως να τα συνδέσετε συνολοκά στον περιηγητή. Αυτό είναι χρήσιμο για την ανάπτυξη του περιηγητή και των προσθέτων.</p> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console">Κονσόλα Περιηγητή</a></dt> - <dd>Δείτε τα μηνύματα που καταγράφονται απο τον ίδιο τον περιηγητή καθώς και των προσθέτων, και τρέξτε τον κώδικα JavaScript στου περιηγητή .</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox">Εργαλειοθήκη Περιηγητή</a></dt> - <dd>Συνδέστε τα εργαλεία του προγραμματιστή στον ίδιο τον περιηγητή.</dd> -</dl> -</div> - -<div class="column-half"> -<h2 id="Επεκτείνοντας_τα_εργαλεία_του_προγραμματιστή">Επεκτείνοντας τα εργαλεία του προγραμματιστή</h2> - -<p>Τα εργαλεία του προγραμματιστή είναι σχεδιάσμενα με τέτοιο τρόπο ώστε να μπορούν να επεκταθούν. Τα πρόσθετα του Firefox μπορούν να προσπελάσουν τα εργαλεία του προγραμματιστή και τα εξαρτήματα που χρησιμοποιούν μπορούν να επεκτείνουν υπάρχοντα εργαλεία ή να προσθέσουν καινούρια εργαλεία. Με το πρωτόκολλο απομακρυσμένης αποσφαλμάτωσης μπορείτε να σχεδιάσετε τους δικούς σας πελάτες και εξυπηρετητές αποσφαλματώσης. Επίσης σας δίνει τη δυνατότητα να αποσφαλματώσετε ιστοσελίδες χρησιμοποιώντας δικά σας εργαλεία ή να αποσφαλματώσετε διαφορετικούς στόχους χρησιμοποιώντας τα εργαλεία του Firefox.</p> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Adding_a_panel_to_the_toolbox">Προσθέστε ένα νέο πίνακα στα εργαλεία προγραμματιστή</a></dt> - <dd>Γράψτε ένα πρόσθετο που προσθέτει έναν πίνακα στην εργαλειοθήκη.</dd> -</dl> - -<dl> - <dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Πρωτόκολλο Απομακρυσμένης Αποσφαλμάτωσης</a></dt> - <dd>Το πρωτόκολλο που χρησιμοποιείται για να συνδέει τα εργαλεία του προγραμματιστή του Firefox με τους στόχους αποσφαλμάτωσης π.χ όπως ο περιηγητής Firefox ή μία συσκευή με λειτουργικό Firefox.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Editor">Επεξεργαστής πηγαίου κώδικα</a></dt> - <dd>Μία έκδοση ενός επεξεργαστή κώδικα στον Firefox η οποιά μπορεί να ενσωματωθεί στα πρόσθετά σας.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger-API">The <code>Debugger</code> Interface</a></dt> - <dd>An API that lets JavaScript code observe the execution of other JavaScript code. The Firefox Developer Tools use this API to implement the JavaScript debugger.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Custom_output">Web Console custom output</a></dt> - <dd>How to extend and customize the output of the <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Web Console</a> and the <a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console">Browser Console</a>.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Example_add-ons">Example devtools add-ons</a></dt> - <dd>Use these examples to understand how to implement a devtools add-on.</dd> -</dl> -</div> -</div> - -<hr> -<h2 id="Περισσότεροι_πόροι">Περισσότεροι πόροι</h2> - -<p>Αυτό το κεφάλαιο αναφέρει πόρους που δεν υποστηρίζονται από την ομάδα των εργαλείων του προγραμματιστή του Mozilla, αλλά οι οποίοι χρησιμοποιούνται ευρέως από τους προγραμματιστές του ιστού. Έχουμε συμπεριλάβει μερικά από τα πρόσθετα του Firefox σε αυτή τη λίστα, αλλά για την ολοκληρωμένη λίστα δείτε την κατηγορία: <a href="https://addons.mozilla.org/en-US/firefox/extensions/web-development/">"Προγραμματισμός Ιστού" στα πρόσθετα του mozilla.org</a>.</p> - -<div class="column-container"> -<div class="column-half"> -<dl> - <dt><a href="https://www.getfirebug.com/" title="Firebug">Firebug</a></dt> - <dd>Ένα δημοφιλές και πολύ δυνατό εργαλείο προγραμματισμού του ιστού, το οποίο συμπεριλαμβάνει τον JavaScript διορθωτή σφαλμάτων κώδικα, HTML και CSS θεατή και επεξεργαστή και παρακολούθηση δικτύου.</dd> - <dt><a href="/en-US/docs/DOM_Inspector" title="DOM_Inspector">Επιθεωρητής DOM </a></dt> - <dd>Επιθεώρησε, δες και επεξεργάσου την DOM στις ιστοσελίδες ή XUL(XML Mozilla) παράθυρα.</dd> - <dt><a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/" title="Web-Developer">Προγραμματιστής Ιστού</a></dt> - <dd>Προσθέτει ένα μενού επιλογών και μια εργαλειοθήκη στον περιηγητή με διάφορα εργαλεία για τους προγραμματιστές του ιστού.</dd> -</dl> -</div> - -<div class="column-half"> -<dl> - <dt><a href="https://webmaker.org/en-US/tools/">Εργαλεία Δημιουργίας Ιστού</a></dt> - <dd>Ένα σετ από εργαλεία που αναπτύχθηκαν απο τον Mozilla, το οποίο στοχεύει στον να ξεκινήσουν οι άνθρωποι να ασχολούνται με τον προγραμματισμού του ιστού.</dd> - <dt><a href="http://www.w3.org/Status.html" title="W3C">W3C Eπικυρωτής</a></dt> - <dd>Η W3C ιστοσελίδα φιλοξενεί ένα μεγάλο αριθμό από εργαλεία για να ελέγξεις την εγκυρότητα του ιστότοπού σου, συμπεριλαμβανομένων των <a href="http://validator.w3.org/" title="http://validator.w3.org/">HTML</a> και <a href="http://jigsaw.w3.org/css-validator/" title="http://jigsaw.w3.org/css-validator/">CSS</a>.</dd> - <dt><a href="http://www.jshint.com/" title="JSHint">JSHint (Υπόδειξη JS)</a></dt> - <dd>Εργαλέιο ανάλυσης του κώδικα JavaScript.</dd> -</dl> -</div> -</div> - -<h2 id="Subnav">Subnav</h2> - -<ol> - <li><a href="#">Creating</a> - - <ol> - <li><a href="/en-US/docs/Tools/Scratchpad" title="Scratchpad">Scratchpad</a></li> - <li><a href="/en-US/docs/Tools/Style_Editor" title="Style Editor">Style Editor</a></li> - <li><a href="/en-US/docs/Tools/Shader_Editor">Shader Editor</a></li> - </ol> - </li> - <li><a href="#">Debugging</a> - <ol> - <li><a href="/en-US/docs/Tools/Page_Inspector" title="Tools/Page_Inspector">Page Inspector</a></li> - <li><a href="/en-US/docs/Tools/Web_Console" title="Web Console">Web Console</a></li> - <li><a href="/en-US/docs/Tools/Debugger" title="Debugger">Debugger</a></li> - <li><a href="/en-US/docs/Tools/Network_Monitor" title="Network Monitor">Network Monitor</a></li> - <li><a href="/en-US/docs/Tools/GCLI" title="GCLI">Developer Toolbar</a></li> - <li><a href="/en-US/docs/Tools/3D_View" title="3D View">3D View</a></li> - </ol> - </li> - <li><a href="#">Mobile</a> - <ol> - <li><a href="/en-US/Firefox_OS/Using_the_App_Manager" title="App Manager">App Manager</a></li> - <li><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android" title="Debugging Firefox for Android">Firefox for Android</a></li> - <li><a href="/en-US/docs/Tools/Firefox_OS_Simulator" title="Firefox OS Simulator">Firefox OS Simulator</a></li> - <li><a href="/en-US/docs/Tools/Responsive_Design_View" title="Responsive Design View">Responsive Design View</a></li> - </ol> - </li> - <li><a href="#">Performance</a> - <ol> - <li><a href="/en-US/docs/Tools/Profiler" title="Profiler">Profiler</a></li> - <li><a href="/en-US/docs/Tools/Paint_Flashing_Tool" title="Paint Flashing Tool">Paint Flashing Tool</a></li> - <li><a href="/en-US/docs/Tools/Web_Console#Reflow_events" title="Reflow event logging">Reflow Event Logging</a></li> - <li><a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis" title="Network Performance">Network Performance</a></li> - </ol> - </li> - <li><a href="#">Debugging the browser</a> - <ol> - <li><a href="/en-US/docs/Tools/Browser_Console" title="Browser Console">Browser Console</a></li> - <li><a href="/en-US/docs/Tools/Browser_Toolbox" title="Browser Toolbox">Browser Toolbox</a></li> - </ol> - </li> - <li><a href="#">Extending the devtools</a> - <ol> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Adding_a_panel_to_the_toolbox">Adding a panel to the toolbox</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Example_add-ons">Example devtools add-ons </a></li> - <li><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Remote Debugging Protocol</a></li> - <li><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol_Stream_Transport">Stream Transport</a></li> - <li><a href="/en-US/docs/Tools/Editor" title="Source Editor">Source Editor</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger-API">The <code>Debugger</code> Interface</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Custom_output">Web Console custom output</a></li> - </ol> - </li> - <li><a href="/en-US/docs/Tools_Toolbox#Settings">Settings</a></li> - <li><a href="/en-US/docs/Tools/Release_notes">Release notes</a></li> -</ol> |