Best Debugging Tools for Google Chrome

Skim through traffic with highlighting by content type, status & source, or use powerful filtering tools to precisely match the messages that matter to you. Examine the URL, status, headers & body of each request or response, with inline explanations & docs from MDN. Dig into message bodies with highlighting & auto formatting for JSON, HTML, JS, hex and others, all using the power of Monaco, the editor from Visual Studio Code. Precisely match requests, jump to them when they appear, and edit anything: the target URL, method, headers or body. Manually respond directly to requests as they arrive, or pass them upstream, and pause & edit the real response on the way back. Step through HTTP traffic request by request, or manually mock endpoints and errors. Create rules to match requests and respond with your own content, to quickly prototype against new endpoints or services.

DebugBear is a web performance monitoring tools that helps companies keep their website fast and pass Google's Core Web Vitals assessment. Find out how to optimize your website and get alerted when there's a problem. Run scheduled synthetic tests, monitor data from Google's Chrome User Experience Report (CrUX), and collect real user analytics directly on your website. Track Google Lighthouse scores over time and benchmark against your competition. Get custom performance recommendations with detailed analysis, and quickly try out performance optimizations with page speed experiments – without deploying any code!

Dev teams use Disbug chrome extension to capture bugs with screen recording, screenshots, console logs, network logs, user events and upload them to the project management tool, with a single click! Explain and narrate the problem visually. Let developers see exactly what happened when it went wrong. One-click capture of the entire context for bug reports. Instantly know what went wrong from every angle by capturing the complete session. Get consolidated technical logs directly in your favorite tools and with a link to see the detailed logs. Centralize everything in your issue trackers. Seamless integration with the tools of your choice. Automatically create tickets in the pre-configured issue tracker when you report the bug. Expedites the debugging process. Gives you more clarity and makes development easy. Cut down your bug reporting time by 60%. Streamline the work of QA testers, developers & project managers at costs less than a cup of coffee!

If you’ve taken a screenshot or screen recording, you already know how to Jam. Jam auto-magically creates bug reports with all the info engineers need. Jam creates better bug reports in whatever tool you use. Share links to your bug reports or send them directly to your favorite issue tracker. Your teammates benefit whether they’ve signed up or not. Jam captures everything an engineer needs to debug. We've cut out the need for all those follow-up calls to share more context. Everything they need is right there. Perfect bug reports, every time. No more back and forth. Integrates tightly with your favorite issue trackers & tools. As easy as taking a screenshot. Trusted by thousands of teams at companies. Report bugs in seconds, without disrupting your workflow. Jam currently supports developers during the code review and testing cycles by capturing bug diagnostic data and instantly replaying the bug to seamlessly identify what needs to be fixed.

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster. There are many ways to open DevTools, because different users want quick access to different parts of the DevTools UI. When you want to work with the DOM or CSS, right-click an element on the page and select Inspect to jump into the Elements panel. Or press Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS). When you want to see logged messages or run JavaScript, press Command+Option+J (Mac) or Control+Shift+J (Windows, Linux, Chrome OS) to jump straight into the Console panel. Toggle various overlays and speed up DOM tree navigation with badges. The main uses of the Chrome DevTools Console are logging messages and running JavaScript.

weinre is WEb INspector REmote. Pronounced like the word "winery". Or maybe like the word "weiner". weinre is a debugger for web pages, like FireBug (for Firefox) and web inspector (for WebKit-based browsers), except it's designed to work remotely, and in particular, to allow you to debug web pages on a mobile device such as a phone. weinre was built in an age when there were no remote debuggers available for mobile devices. Since then, some platforms are starting to provide remote debugger capabilities, as part of their platform toolset. weinre reuses the user interface code from the web inspector project at WebKit, so if you've used Safari's web inspector or Chrome's Developer Tools, weinre will be very familiar. In normal usage, you will be running the client application in a browser on your desktop/laptop, and running a target web page on your mobile device. weinre does not make use of any 'native' code in the browser, it's all plain old boring JavaScript.