This document is intended for students and faculty who want to get started with DevTools.
DevTools are a collection of tools that allow one to examine, edit, and debug HTML, CSS, and JavaScript on Firefox and Chrome for both the desktop and on mobile.
- Similar to Safari Inspector element
- Allow you to inspect code There is a “Developer Edition” of Firefox that contains all of the DevTools
- Includes tools that allow you to develop Android code locally
- https://www.mozilla.org/en-US/firefox/developer/
An excellent overview of accessibility needs in Dev Tools: https://www.marcozehe.de/2016/01/26/making-the-firefox-developer-tools-accessible/
The information below is key to getting started with accessibility in DevTools. In fall 2017, we worked with the Debugger so debugger-specific links are also included below.
| Resource | Link |
|---|---|
| User page for Firefox Developer Tools. Start here to understand what DevTools are and how to use them. | https://developer.mozilla.org/en-US/docs/Tools |
| Slack Communication Channel - used for most DevTools conversations. Use the #General channel. | https://devtools-html-slack.herokuapp.com/ |
| DevTools IRC Channel - Appears to have less human traffic than the slack channel, but new bug reports are automatically posted here. | #devtools on irc.mozilla.org |
| Directions for installing the full Mozilla dev environment. Follow the Tasks To Complete except for “Set Up Development Environment” unless you need the full dev environment. If you only need DevTools, see link below. | https://github.com/gabrielluong/devtools-getting-started |
| Directions for installing the DevTools environment. You will need git installed in all environments. The installation of yarn produces many warning messages, this is normal | https://github.com/devtools-html/debugger.html/blob/master/docs/getting-setup.md |
| Getting Started instructions for Canada's Undergraduate Capstone Open Source Projects (UCOSP) projects | https://github.com/gabrielluong/devtools-getting-started |
| GitHub repo for Debugger - This is the repo for the Debugger. The Issues tab will show bugs and you can search on the Accessibility tag. | https://github.com/devtools-html/debugger.html |
| Available Debugger Bugs - This link filters the Debugger issues to show the available accessibility bugs that have been identified as useful for a class. To get a list of all available Debugger bugs, click on the X next to the message “Clear current search query, filters, and sorts”. | https://github.com/devtools-html/debugger.html/issues?q=is%3Aissue+is%3Aopen+label%3Aaccessibility |
| People - Jason Last indicated that there are a number of folks in the Debugger community willing to help. | “We have a community team on the debugger (David, Hubert, Wellington, Jaideep) who would be happy to mentor” |
These resources may be useful during development, but are not key to getting started.
| Resource | Link |
|---|---|
| DevTools Google Documents Page - holds notes from DevTools weekly meetings. | https://docs.google.com/document/d/1pUx9xq6L7bonSrDpyUNTQkQxTxAsULLu4kkHZLMEq6w/edit |
| DevTools Forum with articles about updates to the developer tools. Look here for recent information about particular tools. | https://hacks.mozilla.org/category/developer-tools/ |
| DevTools Twitter handle. | @FirefoxDevTools |
| Mozilla Developer Tools Notes - This is a google forum and appears to contain higher-level information such as announcements about meetings, new directions, etc. Use Slack for lower-level problem solving. | https://groups.google.com/forum/#!forum/mozilla.dev.developer-tools |
| GitHub list of DevTools repos - This is a list of the various repos used | https://github.com/devtools-html |
| Firefox DevTools Getting Started Page - This may be out of date and may not work. You may want to look at: https://github.com/gabrielluong/devtools-getting-started | http://docs.firefox-dev.tools/getting-started/ |
| List of easy DevTools bugs - I think that these are created specifically to get folks started on Dev Tools. | http://bugs.firefox-dev.tools/?tool=all&easy |
| Mozilla Central repo - “The” repo for all of Mozilla. Some projects, including DevTools are migrating to GitHub. | https://dxr.mozilla.org/mozilla-central/source/ |
This section contains links to courses that are using DevTools. Look here for how DevTools accessibility is being incorporated into courses including assignments, etc.
| Course | Level | Instructor | Institution | Description | Link |
|---|---|---|---|---|---|
| Software Engineering | Senior | Heidi Ellis | Western New England Univ | We are doing a typical Requirements, Design, Implement, Test approach using Dev Tools as the project under development. | http://mars.wne.edu/~hellis/CS490/syllabus.html |
| Open Source Software Engineering | Mixed (Sophomore, Junior, Senior) | Emily Lovell | Berea College | History, culture, and etiquette of open source, plus team-based project contribution. | https://trello.com/b/TgzFSneB/open-source-software-engineering |