I am having trouble setting breakpoints in Google Chrome

For a while, I've been using Google Chrome to debug my JavaScript code without any issues. However, out of nowhere, I am no longer able to place breakpoints. When I click on the line number where I used to add breakpoints, nothing happens. Sometimes, when I click rapidly, I can see it attempting to add breakpoints, but they won't stay.

The only change I made was installing JSONView. I have since uninstalled it, but still cannot add breakpoints.

Does anyone have any suggestions or ideas?

Update: Interestingly, I can add breakpoints on other webpages like StackOverflow, just not on the one I'm currently developing and running on localhost.

javascriptdebuggingjsongoogle-chrome

Answer №1

The issue is still present. I've encountered this behavior in the Chrome debugger for as long as I can recall. A simple solution is to close and reopen the debugger, which often resolves the issue. It may require multiple attempts at times before it successfully functions again.

Answer №2

A recent bug was resolved as of yesterday (February 3) with the implementation of a new API designed for managing JavaScript breakpoints: http://code.google.com/p/chromium/issues/detail?id=69988

I decided to test this fix by downloading the latest Chromium nightly build from . Surprisingly, I was able to successfully set breakpoints in JavaScript, something that had previously been problematic when using the stable/beta/dev versions of Chrome.

It is anticipated that this solution will be integrated into upcoming releases of Chrome. In the meantime, one viable workaround for setting breakpoints is to include debugger; statements in your code.

Answer №3

If you encounter issues setting a breakpoint on unreachable code, it may be due to unnecessary breaks or returns before the breakpoint. Ensure there are no stray breaks or returns that could be causing problems when starting a debugger in a new Chrome process.

For example:

var foo = 'bar';
return foo;

foo = 'baz';
debugger

In the scenario above, statements after the return will not be executed as expected, and Chrome will prevent debugger commands or breakpoints from being set.

Answer №4

Don't forget to double-check your JavaScript code! I encountered a similar error while using both Chrome and Firefox, where the issue turned out to be a duplicated method name.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The issue I'm facing is that the style loader is failing to load the CSS within the <head

I am currently facing an issue with importing my CSS into my webpack bundle for our Angular 1 application. Initially, everything was working fine as we bundled our application using Webpack. The HTML included the bundle and vendor scripts, additional Java ...

javascriptcssangularjswebpackwebpack-style-loader

Is it feasible to utilize Google Calendar API for JavaScript through npm install? Alternatively, can the Google Calendar API be utilized for Node.js in the browser within Next.js?

Looking to integrate the Google Calendar API as a library in your Next.js project without using _document.tsx? I have explored two potential approaches for achieving this: Utilize the google calendar api for JavaScript by installing it via npm Use the goo ...

javascriptnode.jsnext.jsgoogle-calendar-api

What could be causing one of my images to not appear on my Gatsby page?

Hey there, I could use some help with this issue: Recently, I created a website using Gatsby.js and deployed it to my web server (which is running NGINX on Ubuntu 20.04). The site uses Gatsby Image for querying and displaying images, and everything seems t ...

javascripthtmlgatsbygatsby-image

The navigation in Framework 7 is causing issues with the on-click functionality

Utilizing the framework's built-in formToJSON() function, I have been able to retrieve form values. By utilizing a click event, I am able to log the values. $$("#query-submit").on("click", function () { var queryForm = app.formToJSON("#query-form ...

javascriptajaxperformancehtml-framework-7

Display the div according to the $index selected from the AngularJS list

Below is the structure of my HTML code: <div class="col-md-4"> <ul class="list-group text-left"> <a href="#" class="list-group-item" ng-click="showData($index)" ng-repeat="field in Data"> {{ field.name }}</a> ...

javascriptangularjs

What is the best way to maintain scrollbars on mobile devices?

I'm currently building a cross-platform application using Angular 4 that needs to work seamlessly on both mobile and desktop devices. Is there a special trick to prevent the scrollbars from disappearing when viewing this page on a mobile browser? I&ap ...

angularcssgoogle-chromemobilescrollbar

Is it possible to switch between different fabricJS canvases seamlessly?

Consider this scenario where I have three canvas elements: <canvas id="c1" width="400" height="300"></canvas> <canvas id="c2" width="400" height="300"></canvas> <canvas ...

javascripthtmlcanvashtml5-canvasfabricjs

AngularJS does not update values properly if there is a style applied to the parent container

I'm struggling to find the best approach to handle this situation. This is how my AngularJS code looks: <span class="something" ng-hide="onsomecondition"> {{value}} </span> .something{ text-align:left; padding:10px;} Issue: The value ...

javascriptcssangularjs

Is it possible for links to remain clickable even if they pass underneath a div

I have implemented a shadow using a div element to cover some content beneath it. However, I am facing an issue where the div that is under the shadow cannot be interacted with. Is there any solution to this problem? Thank you ...

javascriptjquerycsshtml

Eliminate a descendant of a juvenile by using the identification of that specific juvenile

Here is the current structure I'm working with: https://i.sstatic.net/TejbU.png I want to figure out how to eliminate any field that has the id 3Q41X2tKUMUmiDjXL1BJon70l8n2 from all subjects. Is there a way to achieve this efficiently? admin.databa ...

javascripttypescriptfirebasefirebase-realtime-databasefirebase-admin

Having trouble setting up node-gyp on ubuntu

npm http 200 https://registry.npmjs.org/weak/-/weak-0.2.2.tgz npm http GET https://registry.npmjs.org/bindings npm http 304 https://registry.npmjs.org/bindings > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8dfcdc9c3e898 ...

javascriptnode.jsubuntunpm

The action 'onDeleteClick' cannot be executed as the property is undefined

Why is the onDeleteClick function working on the first <div>, but returning undefined on the second one? I am able to access the reference of this, but when clicking, it shows "onDeleteClick of undefined". I am confused as to why the onDeleteClick f ...

javascriptreactjs

Receiving a 401 error while attempting to make an axios get request with authentication headers

I have been utilizing axios in my React project to fetch data from MongoDB. However, I am facing a challenge with the axios get requests returning a 401 error when I include my auth middleware as a parameter. This middleware mandates that the user must pos ...

javascriptreactjsexpressaxiosjwt

Switching classes in jQuery for Internet Explorer 8

I am attempting to update the color of a header when it reaches a certain scroll position. I have implemented this script using jQuery: var $document = jQuery(document), $element = jQuery('#header'), className = 'red'; $docume ...

javascriptjqueryinternet-explorer-8toggleclass

How do I transfer the parameters from a task.json in Visual Studio Code to a g++ instruction that contains a blank space in the command?

I am facing an issue with my Visual Studio Code tasks.json configuration for compiling a C++ file using g++: { "version": "2.0.0", "tasks": [ { "label": "echo", "type": "shell", "command": "g++", "args": [ " ...

jsonvisual-studio-codeintellisense

Headers and data organization in Angular 2

I'm searching for a simple Angular 2 example that demonstrates how to fetch both the headers and data from a JSON API feed. While there are plenty of examples available for fetching data only, I haven't been able to find any that show how to retr ...

javascriptjsonangular

What could be the reason for the malfunctioning dropdown menu in my navigation bar upon clicking it?

After spending hours practicing creating a navbar using Bootstrap 3.3.7, I've hit a roadblock - the dropdown is not working when clicked on. It's frustrating because I have double-checked all my scripts and ensured that I have the latest version ...

javascriptjqueryhtmlcsstwitter-bootstrap

Uncover the structure of a regular expression pattern to discover the quantity of tokens and the size of the anticipated matches

I am looking to validate certain fields in my forms by determining the number of tokens and length specified by a particular regular expression. For example, For the pattern [0-9]{3},[0-9]{2}, I need to identify 5 as the length and 2 as the number of to ...

javascriptjqueryregex

What happens to the parent scope in Javascript when declaring a subclass and why does it get overridden?

I have two classes in JavaScript, with one inheriting from the other. The structure is as follows: var Parent = (function(){ var self; var parent = function(){ self = this; self.type = 'Parent'; }; parent.protot ...

javascriptoopinheritancescope

What is the best way to generate a live map with constantly updating markers?

Is it possible for me to learn how to develop a live map similar to the one on this site: www.lightningmaps.org? It's fascinating to watch new markers pop up every few seconds. I'm interested in building a real-time map that can track IP locatio ...

javascriptphpajaxgoogle-mapsreal-time