---
title: Εργαλεία Προγραμματισμού του Firefox
slug: Tools
translation_of: Tools
original_slug: Εργαλεία
---
<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>