# Learn web developer tools
> Web development tools allow web developers to test and debug their code. They are different from website builders and IDEs in that they do not assist in the direct creation of a webpage, rather they are tools used for testing the user facing interface of a website or web application.
> Web development tools come as browser add-ons or built in features in web browsers. The most popular web browsers today like, Google Chrome, Firefox, Opera, Internet Explorer, and Safari have built in tools to help web developers, and many additional add-ons can be found in their respective plugin download centers.
> Web development tools allow developers to work with a variety of web technologies, including HTML, CSS, the DOM, JavaScript, and other components that are handled by the web browser. Due to the increasing demand from web browsers to do more popular web browsers have included more features geared for developers. - wikipedia
While most browsers come equipped with web developer tools, the [Chrome developer tools](https://developers.google.com/web/tools/chrome-devtools/) are currently the most talked about and widely used tools available.
I'd suggest learning and using the [Chrome web developer tools](https://developers.google.com/web/tools/chrome-devtools/), simply because the best resources for learning web developer tools revolves around Chrome DevTools.
##### Learn Chrome Web Developer Tools
- [Explore and Master Chrome DevTools](http://discover-devtools.codeschool.com/)
- [Chrome Developer Tools](https://code.tutsplus.com/courses/chrome-developer-tools) [watch][$]
- [Using The Chrome Developer Tools](http://www.pluralsight.com/courses/chrome-developer-tools) [watch][$]
##### Chrome Web Developer Tools Docs:
- [Per-Panel Documentation](https://developers.google.com/web/tools/chrome-devtools/#docs)
- [Command Line API Reference](https://developers.google.com/web/tools/javascript/command-line/command-line-reference?hl=en)
- [Keyboard & UI Shortcuts Reference](https://developers.google.com/web/tools/iterate/inspect-styles/shortcuts)
- [Settings](https://developer.chrome.com/devtools/docs/settings)
##### News/Newsletters/Podcasts/Tips:
- [Dev Tips](https://umaar.com/dev-tips/)
- Introduction
- What is a front-end developer?
- Part I: The front-end practice
- Front-end jobs titles
- Common web tech employed
- Front-end dev skills
- Front-end devs develop for...
- Front-end on a team
- Generalist myth
- Front-end interview questions
- Front-end job boards
- Front-end salaries
- How FD's are made
- Part II: Learning front-end dev
- Self directed learning
- Learn internet/web
- Learn web browsers
- Learn DNS
- Learn HTTP/networks
- Learn web hosting
- Learn general front-end dev
- Learn UI/interaction design
- Learn HTML & CSS
- Learn SEO
- Learn JavaScript
- Learn DOM, BOM & jQuery
- Learn web fonts
- Learn accessibility
- Learn web/browser API's
- Learn JSON
- Learn front-end app architecture
- Learn Interface/API design
- Learn web dev tools
- Learn command line
- Learn node.js
- Learn module loader
- Learn package managers
- Learn version control
- Learn build & task automation
- Learn site performance optimization
- Learn JS testing
- Learn headless browsers
- Learn offline dev
- Learn security
- Learn multi-thing dev (e.g. RWD)
- Directed learning
- front-end schools, courses, & bootcamps
- Front-end devs to learn from
- Newsletters, news, & podcasts
- Part III: Front-end dev tools
- General front-end dev tools
- SEO tools
- Prototyping & wireframing tools
- Diagramming tools
- HTTP/network tools
- Code editing tools
- Browser tools
- HTML tools
- CSS tools
- DOM tools
- JavaScript tools
- App (desktop, mobile, tablet etc..) tools
- Templating tools
- UI/widget tools
- JSON tools
- Testing framework tools
- Data storage tools
- Module/package loading tools
- Module/package repo. tools
- Web/cloud/static hosting tools
- Project management & code hosting
- Collaboration & communication tools
- CMS hosted/API tools
- BAAS (for front-end devs) tools
- Offline tools
- Security tools
- Tasking (aka build) tools
- Deployment tools
- Site/app monitoring tools
- JS error monitoring tools
- Performance tools