Mozilla Developer Network (MDN): Get Started with Best Tools and Guides

The Mozilla Developer Network is a community site for web developers, designers, students, professional coders, and enthusiastic amateurs — anyone interested in learning to code for the web or improving their programming skills. It brings together documentation, reference material, tutorials, Mozilla-specific information, and a range of tools that will help you to improve your code.

In addition, the Mozilla Developer Network has a range of social and collaborative services, including a blog and an IRC channel. Members are invited to get connected, get involved, and contribute to Mozilla’s many open source projects.

What is Mozilla?

Mozilla is a non-profit organization best known for their open source browser, Firefox. The organization began life in the late 1990s, when Netscape released its web browser, Netscape Communicator, for free. At first, the Mozilla Organization was just a small team mostly inside Netscape, tasked with managing the development of this newly open source browser. In 2003, the non-profit Mozilla Foundation was formed. AOL (Netscape’s parent company) transferred relevant intellectual property to the foundation, paid for employee time, and donated $2 million.

Mozilla has continued to develop and improve the Firefox browser, but has also greatly expanded its scope. Their mission is to “defend the freedom of the internet for all.” They do this in a number of ways including providing open source browsers for a variety of platforms, advocating for public policy consistent with a free and open internet, promoting open web standards throughout the industry, and educating developers through their Mozilla Developer Network.

Documentation and Tutorials

A large part of MDN’s work is providing extensive documentation on web technologies. They have what is arguably the most complete reference on HTML available, with hundreds of pages detailing HTML elements, browser APIs, web sockets, offline storage, and every other detail of the modern web.

There is also developer documentation and tutorials for other fundamental web technologies like JavaScript and CSS, along with developer guides for accessibility, web security, web app development, and many other topics.

All of these documentation and tutorial projects — including their documentation for the own projects — is intended to promote the use of open web standards for development. Their material is aimed at developers of all levels; from an extremely basic introduction to HTML to tutorials on how to build games in HTML5. Additionally, most of the site’s pages are translated into a number of different languages, giving MDN the unique ability to teach open web development practices around the globe.

Developer Tools

Aside from providing in-depth documentation on web technologies, MDN helps web workers through the development of a number of high quality, free and open source development tools. These tools are part of the Firefox browser project, and are mostly built into (or used with) the Firefox browser.

There are a lot of Firefox developer tools. Here are a few highlights:

• Scratchpad lets you experiment with JavaScript, providing a small JS code editor. Code written in scratchpad is executed in the current web page.
• Style Editor is similar, allowing you to add, edit, or remove any CSS on a web site, on the fly.
• Shader Editor lets you edit vertex and fragment shaders used by the WebGL JavaScript graphics rendering library.
• Page Inspector allows you to easily edit and modify the source HTML of a page.
• Web Console provides access to performance and error logs generated during page rendering, and allows users to execute arbitrary lines of JavaScript; similarly, the Browser Console provides the same information for the browser as whole, rather than just a single web page.
• Debugger lets you step through JavaScript a line at a time, helping you track down where bugs are occurring.
• Network Monitor illustrates all the requests made by the browser, showing response, error, and performance information.
• Storage Inspector provides a way to access and manipulate the many types of browser storage, such as cache, cookies, local storage, session storage, and IndexedDB.
• DOM Property Viewer allows you to view the document object model (the browser’s internal representation of a web page in active memory) as an expandable tree structure, and explore the properties of each DOM element.
• Eyedropper works like the eyedropper tool in Photoshop and other graphics programs, letting you find the exact color of any pixel in the browser.
• View Source lets you view the raw HTML source of the current page.
• Responsive Design Mode automatically scales the viewport to several pre-set or custom sizes, to emulate small screen sizes such as those found on phones, tablets, and other devices.
• Paint Flashing Tool highlights portions of the view port which have to be repainted (re-rendered) in response to an input.
• Browser Toolbox makes it possible to apply the developer tools designed for web pages to the browser as a whole and to browser plugins and add-ons.
• The performance tool provides detailed information on a site’s responsiveness and speed. This includes several subtools for looking at various aspects of website performance:
  • Waterfall shows a visualization of your browser’s activity over load and rendering time.
  • Call Tree uses statistical analysis to determine which JavaScript functions consumed the most computing time.
  • Flame chart uses the same dataset as Call Tree to provide a chronologically ordered readout of which JavaScript functions were being executed when.
  • Allocations shows how much memory each JavaScript function is being allocated during execution.
• WebIDE is an integrated development environment for building, testing, and debugging mobile apps built for the Firefox OS. Additionally, WebIDE makes it possible to use the other Firefox development tools with mobile web browsers.

These development tools can be extended, and MDN provides an Add-on SDK for extension development. Extensions can be written in web languages (HTML, CSS, JavaScript). The SDK provides JavaScript APIs for nearly every aspect of the browser.

Firefox Developer Edition

Firefox Developer Edition is a specialized distribution of Firefox which puts the developer tools front-and-center. Developer tools in this edition are part of the top-level GUI, not hidden behind menus. Additionally, experimental versions and beta-releases of new tools are included in the developer edition before they are released into the main browser. Finally, the code view in the element inspector, source view, and other tools displays in a dark theme reminiscent of popular code editors like Sublime and Atom.

Connecting with the MDN Community

Mozilla Developer Network is not just a set of resources, and the Mozilla Foundation is not just a non-profit organization. Mozilla is a world-wide community that includes a wide range of people, from core developers employed by the foundation, to volunteers who translate pages or fix typos.

There are lots of ways to connect and get involved:

• The Mozilla IRC Server is one of the most active places to chat with Mozilla community members. They run several channels for various topics. If you’re just finding your way, you might want to try #newbies.
• The Mozilla wiki is a community-created site with information on all things Mozilla-related.
• Nearly every page on the Mozilla Developer Network site is community-edited. If you see a typo, or a place that could be improved, you could sign up for an account and get right in fixing things. Be sure to read up on how to do an editorial review first, though.
• If you want to contribute as a developer to any of Mozilla’s tools, you can find the appropriate GitHub page and get started.
• You could even look for a job with Mozilla or become a volunteer.

Summary

Mozilla Developer Network, and the larger Mozilla Foundation, is one of the most important organizations promoting, advocating, and educating for the open web. Their tools and tutorials will make you a better web developer, and becoming involved with the larger community will expand your professional network in ways otherwise not possible. They are, in many ways, at the heart of the web. If that’s where you’d like to be, you would do well to explore what they have to offer, and get involved.

Further Reading and Resources

We have more guides, tutorials, and infographics related to coding and development:

• Composing Good HTML, and Validators: the basics of presenting information on the web.
• An Introduction to JavaScript: the most popular programming language in the world, now also used on the server side.
• CSS3 — Intro, Guides, and Resources: all about how modern webpages are displayed.

What Code Should You Learn?

Confused about what programming language you should learn to code in? Check out our infographic, What Code Should You Learn? It not only discusses different aspects of the languages, it answers important questions such as, “How much money will I make programming Java for a living?”

What Code Should You Learn?