Chrome debugger / breakpoint stops at wrong line - google-chrome

It's been from version 0.47 that my breakpoints in chrome developer tool, would technically stops at the right line but it's shown otherwise on the source code panel.
there would always be a 1 or 2 line shift between the actual breakpoint and the blue colored selected line. that makes it very difficult to debug as it's never shown right, does anyone heard of a solution?
if(true){
this.anyfunction();
debugger;
var toto = 10;
toto ++;
}
In this example the first selected blue line in source code would be toto++, while toto would be undefined if you'd add a watch on toto, that's why I assume the breakpoint is properly hit, but there's a display problem...

I have faced same problem, It's working fine after I change inspect tools settings in chrome..
Click three dot icon in right top corner of inspect tool and select Settings.
(or)
Click F1.
Uncheck the Enable JavaScript source maps checkbox under the Sources in Preferences.
Now it's working fine...

Is your expression spread across multiples lines? For example:
var x = 1 +
2 +
3 +
4 +
5;
This is known to cause wonky behavior. When I set the breakpoint on the 1st line and then run the script, DevTools pauses on the 4th line.
Solution: set the breakpoint on the line above the expression.

in "chrome developer tools"
in "source" tab
look for 'cr' text in RED
color!
if you find anything it's mean there is some ENTER at the end of some lines that is not compatilble with you current EOF setting.
replace 'cr' with ENTER and you should good to go
EOF: End-Of-Line

Unchecking the Enable JavaScript source maps

Related

How to get rid of [VM] line in Chrome console?

Now I can see about VM line in my chrome developer tools like this.
There are some solution that I found,
such as make gray 'pause button'
however, it was already gray in my developer-tool
and it was also not worked for me.
How can I get rid of that VM messages in my console?
Thanks for read my problem.
With the right mouse click on a VM:xxx link select "Reveal in Sources panel", and study the code that causes those console messages.
In my case, I found there this line - original Method(...format WithStyles(args, 'color: ${color}'));, and other lines there revealed that it was referring to React Devtools Extention. So in its "Components" console tab => Settings gear icon => Debugging tab => I checked on the "Hide logs during second render in strict mode" option.
It helped me, but it can be some other extension in your case. Study the source code of a message first.
Open Chrome console, than select All Levels (it may appear like Default, if so, click it.) See in the list if Info is checked. If it is checked, close it. It helped me to get rid of it, hope it will help you to get rid of [VM] line in Chrome console too.
Check the image below:

Select a part of the property in chrome inspactor css panel

In one of my PCs when I use inspect tool in chrome, I can't select some part of a property or a value, so I have to retype all the value again. As many times as I click on the selected text, the caret doesn't go to the place I need and the selected text doesn't deselect.
the following picture shows what I want and what happens.
There is no problem in another PC.
Both are windows 10 64bit and google chrome 62.
Try holding shift or control while clicking. Haven't tried it, but it may work. My guess is that it's simply a UX workflow that DevTools doesn't handle well.

How to remove red border in phpStorm?

I have a little strange question, and I'm hoping you could help.
Cause, I've been searching for the answer in Google, in PHPstorm documentation and etc.
Here's what I need. Every time I type something in CSS or HTML with Zen coding, this Red Border appears to the value. When my mouse cursor is anywhere else and I hit "Enter", the cursor goes to the end of that red border.
So does anybody know, how to get rid of it? It drives me crazy..
Thanks.
pressing Enter (or Tab) is enough to remove the border :) See help:
"If the selected template is parametrized and requires user input, the editor enters the template editing mode and displays the first input field highlighted with the red frame. Type your value in this frame and press EnterEnter or TabTab to complete input and pass to the next input field. After completing the last input field, the caret moves to the end of the construct, and the editor returns to the regular mode of operation"
I have had the same unwanted behavior in PHPStrom with php.
For PHP the solution was to uncheck the following checkbox:
Go to Settings (ctrl + alt + s), then navigate to:
Editor -> General -> Smart Keys -> PHP
Uncheck checkbox: "Enable smart function paremeters completion"

Chrome 'paused in debugger' issue

I don't know what I've switched on (by accident) but every time I have the Inspect Element area open and then try to click anything on the webpage not within the Inspect Element area (especially something jQuery related like a slideshow for example) it greys the page, shows a message saying 'Paused in debugger' and then opens a jQuery file within the Sources section of Inspect Element.
Within the 'Call Stack' area, it shows a message saying 'Paused on a "click" Event Listener'.
I don't remember switching this feature on but I'm keen for it to be switched off.
I know this question has been asked before - I thought I'd found the answer when everyone suggested we look to see if the 'Pause' option is switched on (blue). However, it's not switched on, it's grey not blue or any other colour and when I hover over it, it says "Don't pause on exceptions. Click to Pause on all exceptions".
You might also check the Source tab, check under the Event Listener Breakpoints panel if you've set any breakpoints under 'Mouse'.
This can also cause the issue
Break Point icon at top left should be blue like this(For Deactivate BreakPoints)
Should not grey like this
Found solution here, if the little octagonal stop/pause sign (at lower left of Chrome "Sources") is colored (blue or purple), you need to click on it until it's black again.
It did drive me nuts for a short while.....scroll all the way to the bottom of breakpoint window and you'll find XHR Breakpoints & under it there is the Any XHR checkbox...
Goto the sources tab and check all breakpoints.
Go to Elements tab and remove all breakpoints from right pane under DOM Breakpoints
One possible cause, it that you've enabled the "pause on exceptions" (the little stop-sign shaped icon with the pause (||) symbol with in in the lower left of the window). Try clicking that back to the off/grey state (not red nor blue states) and reload the page.
For me, I resolved it by temporarily disabling the Chrome Bitwarden extension.
You could check to see in the Sources tab in the devtools panel to see what is causing this error, it could be an extension.
To open the devtools panel on Chrome, press the F12 key.
For Visual Studio Users, just go Tools>Options>Debugging and make disabled it

How to remove all breakpoints in one step in Google Chrome?

How to remove all breakpoints in one step in Google Chrome? Using version 11.
[update]
There is now a feature request for this.
[update]
The feature request is closed (Dec 2011)!
This is now possible in Sources tab of Chrome Developer Tools.
Please see screen grab below and right click within the "Breakpoints" section of the left window.
Since recently (Chrome 18), you can right-click any breakpoint in the Breakpoints pane and voila! The "Remove All JavaScript Breakpoints" popup menu item!
Chrome Devtools crashed everytime I tried to access the Sources panel because of a breakpoint on a minified Javascript file.
To remove all breakpoints without access to the interface, you can do the following:
Open inspector-on-inspector : undock first inspector and hit ctrl+shift+i to open the second
On the inspector-on-inspector console, execute the following:
window.localStorage.breakpoints = [];
Close the inspectors and reload the page. Now the breakpoints are gone.
Under Sources, you can click button marked with red on picture below or use shortcut Ctrl + F8 just like tool tip is showing (activate / deactivate breakpoints). A little bit lower under 'Breakpoints' you will see all your breakpoints. If you choose to disable all, they will be grayed out.
solution here.
To purge all breakpoints open inspector on inspector (undock first
inspector and hit ctrl-shift-I to open the second) and run
"WebInspector.settings.domBreakpoints.set([])" in second inspector's
console.
new Tabs; Ctrl+Shift+J to Console; Access URL
Open the Chrome task manager and end the tab page.
Ctrl+Shift+J to Application -> Service Workers (Offiline) -> Refresh
to Sources Cancel Breakpoint
Success
Another option is to de-activate all break points using:
Ctrl + F8
In my case Uninstall and new installation of Chrome was without any success.
Also window.localStorage.clear() did not help.
My "last chance solution" is to remove entire directory where Chrome is storing its data.
First turn off your Chrome.
Then look at this path "c:\Users\ {your_user} \AppData\Local\Google\Chrome\User Data\Default\Local Storage\". Here try to delete all what is in this directory.
You can also clear all inspector settings and reload the inspector. It helped me with fantom breakpoint I could not remove in any other way. Open inspector and go to Preferences -> Sync -> Restore defaults and reload (at the bottom).
Step 1: Go to Developer tools and expand Breakpoint section
Step 2: Right click on expanded area of breakpint and there will be many options lik