Configuring your development environment

  • Revision slug: Apps/Tutorials/General/Configuring_your_development_environment
  • Revision title: Configuring your development environment
  • Revision id: 301977
  • Created:
  • Creator: MarkGiffin
  • Is current revision? No
  • Comment

Revision Content

Configuring your development environment

Before you can dive into creating your web application, you need to make sure you have the tools required.

Text editors

A solid text editor is the most crucial tool. There are several free text editors available, including:

Cross-platform

Windows only

Mac only

These are not, of course, exhaustive lists.

Web developer tools

As you would expect, testing and debugging of your application will be done within the browser. You’ll want to snag a few handy developer tools for your browser. These tools will help with everything from the inspection and styling of visual elements of your app, to observing network traffic and debugging JavaScript. We strongly suggest you find a combination of tools that works for you, they can be a lifesaver.

Tools for Firefox users

Firefox has a lot of built-in developer tools; see the Tools->Web Developer submenu, learn more about Firefox developer tools, or look at the Tools page on MDN. Here are some useful Add-ons:

Tools for Google Chrome users

Additional resources can be added to your development environment as needed, but a text editor, browser, and developer tools will get you well on your way to creating a great web app!

Revision Source

<h2 id="Configuring_your_development_environment">Configuring your development environment</h2>
<p>Before you can dive into creating your web application, you need to make sure you have the tools required.</p>
<h3 id="Text_editors">Text editors</h3>
<p>A solid text editor is the most crucial tool. There are several free text editors available, including:</p>
<h4 id="Cross-platform">Cross-platform</h4>
<ul>
  <li><a class="external" href="http://jedit.org/">jEdit</a></li>
  <li><a class="external" href="http://www.gnu.org/software/emacs/" title="http://www.gnu.org/software/emacs/">Emacs</a></li>
  <li><a class="external" href="http://www.vim.org/" title="http://www.vim.org/">vim</a></li>
  <li><a class="external" href="http://www.activestate.com/komodo-edit" title="http://www.activestate.com/komodo-edit">Komodo Edit</a></li>
</ul>
<h4 id="Windows_only">Windows only</h4>
<ul>
  <li><a class="external" href="http://notepad-plus-plus.org/">Notepad++</a></li>
</ul>
<h4 id="Mac_only">Mac only</h4>
<ul>
  <li><a class="external" href="http://www.barebones.com/products/TextWrangler/" title="http://www.barebones.com/products/TextWrangler/">TextWrangler</a></li>
</ul>
<p>These are not, of course, exhaustive lists.</p>
<h3 id="Web_developer_tools">Web developer tools</h3>
<p>As you would expect, testing and debugging of your application will be done within the browser. You’ll want to snag a few handy developer tools for your browser. These tools will help with everything from the inspection and styling of visual elements of your app, to observing network traffic and debugging JavaScript. We strongly suggest you find a combination of tools that works for you, they can be a lifesaver.</p>
<h4 id="Tools_for_Firefox_users">Tools for Firefox users</h4>
<p>Firefox has a lot of built-in developer tools; see the Tools-&gt;Web Developer submenu, learn more about <a class="external" href="http://www.mozilla.org/en-US/firefox/technology/#tools" title="http://www.mozilla.org/en-US/firefox/technology/#tools">Firefox developer tools</a>, or look at the <a href="/en/Tools" title="https://developer.mozilla.org/en/Tools">Tools</a> page on MDN. Here are some useful Add-ons:</p>
<ul>
  <li><a class="external" href="http://getfirebug.com/">Firebug</a></li>
  <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/collections/mozilla/webdeveloper/">Web Developer's Toolbox Collection</a></li>
  <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer Toolbar</a></li>
  <li>Firepicker</li>
  <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/firecookie/">Firecookie</a></li>
  <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/">User Agent Switcher</a></li>
  <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/colorzilla/">ColorZilla</a></li>
</ul>
<h4 id="Tools_for_Google_Chrome_users">Tools for Google Chrome users</h4>
<ul>
  <li>Web Inspector</li>
  <li><a class="link-https" href="https://chrome.google.com/webstore/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm">Web Developer</a> <span class="inlineNote">Official port of Firefox's plugin</span></li>
  <li><a class="link-https" href="https://chrome.google.com/webstore/detail/gbkffbkamcejhkcaocmkdeiiccpmjfdi">Pendule</a></li>
</ul>
<p>Additional resources can be added to your development environment as needed, but a text editor, browser, and developer tools will get you well on your way to creating a great web app!</p>
Revert to this revision