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:
Related
When there is an error because of X, in Firefox I can only detect this by looking at the console. The components still render. I've had this happen on other projects too, on different computers, making me think this is something I am going to have to address specifically for FF.
Versus in Chrome, where the helpful "error component" (IDK what this is called) renders, definitely making the developer aware. I've attached an image of this.
It's the screen that says this at the bottom: "This screen is visible only in development. It will not appear if the app crashes in production. Open your browser’s developer console to further inspect this error. Click the 'X' or hit ESC to dismiss this message."
I really want this to appear in FF. Any clue how? I do have React devtools installed, but that is not the thing driving this, as you don't even need that tool in Chrome to see this rendered.
This was the cause of an extension getting in the way.
I solved this by disabling a handful of extensions at a time until I got the error screen to load. Then I reversed the process until I narrowed it down to one extension.
The culprit was a form auto-fill extension.
I am writing a script that goes to an Amazon URL and clicks on the 'Buy Now' button. That's it. I have to use WebdriverIO, javascript, and ChromeDriver. The problem is that I can't get this button to be clicked no matter which selector I use. I am able to manually do it just fine. But in the Code Inspect below, every combination of div/id/name, span/id/close, or input/id/name has resulted in no clicks. I know the script can see that web object because when I do a BuyNow.getText() to console, it prints out 'Buy Now'. And I know the xpath I use is good because I paste it into Inspect/Find and the exact element lights up yellow. Oh and the .click(), even though Visual Studio Code flags as deprecated, works just fine in previous scripts.
When I manually click on a button, is there a way to see what was the exact element that received this click?
let BuyNow = $(<XPATH>)
BuyNow.click()
Code Inspect
Ok so I found out what the problem was. It had nothing to do with my XPATH selectors, any one of which to the elements in the Code Inspect picture would have worked (example: let BuyNow = *[id='buy-now-button']). The issue is that in the WDIO config file, I had a custom Chrome Profile being used. Which is fine, the Chrome.exe I was using was pointing to another custom Chrome Profile. I thought these two were the same, but the folders paths were getting messed up. Once I resolved them, and had both the Chrome.Exe and WDIO config pointing to the same customer folder, Chrome started to allow me to select buttons. I think that the WDIO code was looking at one user profile of chrome, and the desktop chrome browser that I was using was another user profile.
Solved. Fun Stuff but not really.
My React app has started running this line out of the blue and interrupting my development. The file is React_devtools_backend.js
debugger;t.apply(void 0,o)};n.__REACT_DEVTOOLS_ORIGINAL_METHOD__=t,// $FlowFixMe property error|warn is not writable.
Any ideas why and how to fix this?
It is a bug in React Dev Tools (version: 4.8.0). You can see the issue here. If you use Firefox and update the extension, probably it is going to be fixed. If you are using Chrome, the update is still pending but you can find a temporary solution in the issue link.
Temporary solution:
You should also be able to go to Components tab, press Settings gear,
add checkbox to Break on Warning, then do this again, and remove the
checkbox as a temporary workaround.
This issue has a momentarily quick fix if you're on Chrome (react-devtools#4.8.0):
Open React-DevTools > Components.
In the upper right corner, click the Settings gear icon.
Go to the Debugging tab.
Check Break on Warnings.
Uncheck Break on Warnings.
Finally, reload the page.
While developing with create-react-app, my browser enters debugger mode on warnings:
It breaks on the source code of react-dev-tools:
// --- Welcome to debugging with React DevTools ---
// This debugger statement means that you've enabled the "break on warnings" feature.
// Use the browser's Call Stack panel to step out of this override function-
// to where the original warning or error was logged.
How can I deactivate this behavior?
Go to Chrome Devtools → in the Chrome console, go to Component → Click on Settings → unset Break on Warning. Do the same in Profiler → Settings → unset Break on warning.
#cadoman pointed check and then uncheck to make work for sure.
P.S: Image from https://github.com/facebook/react/issues/19308#issuecomment-656669792
Based on pull request DevTools: Make break-on-warn off by default #19309 it seems it's a bug.
The Break On Warnings box was unchecked for me and it still would break. Removing and readding the extension to force an update fixed it for me.
I don't know of another way to force Chrome to update an extension outside of its regular schedule.
Go to your ReactDev tools in the tab Debugging and disable "Break on Warning".
I think this new behavior started today with this new PR: https://github.com/facebook/react/pull/19048
Chrome has a "BlackBox script" feature which is useful in this case.
Go to Chrome Developer tools -> source tab
Select "react_developer_tools.js" from the left pane
Right-click file and select "Blackbox script"
It's a known issue. A workaround is posted on GitHub: Bug: Unexpected debugger statement in DevTools (solved) #19308
The issue is due to a recent release. A Workaround proposed by the React team is:
Go to Chrome Developer Tools
Click on the Components Tab (React Developer Tools Extension)
Click on the Settings icon (located next to the component search box)
Once modal opens select the Debugging tab
Finally, double click on the Break on Warnings checkbox (check and unchecked)
Make sure at last the Break on Warnings checkbox is unchecked.
Reference: Issue link
Haven't come across this message in all our testing and not sure if it is related to the actual issue.
Basically, have a user agreement text box that the user has to "read" (scroll to the bottom of) before they can click the box that they agree to it. Pretty standard stuff. We launched the web app Sunday and of about 100 users, two have stated that even though they scrolled to the bottom of the text box, the box did not become clickable.
The first one never got back to me, but the second user did and sent me a screenshot of the console:
WebExtension::executeScript: content script injected VM149:1
They are indeed scrolling to the bottom of the box. Initially, we just thought they were scrolling to the bottom of the page and they thought that is what they needed to do. But we were wrong.
I can't find much on it. Not even sure if it is related to the issue since it wasn't labeled as an error.
Both users are using Chrome latest version on Windows. We have them try Edge or Firefox and it works fine. Seems to be isolated to Chrome.
This is likely to be the Okta browser plugin. I have it installed and it produces this same error. The source of the plugin script is:
(function(code) {
if (eval("typeof Okta === 'undefined'")) {
eval("window.Okta = {};");
eval(code);
console.log("WebExtension::executeScript: content script injected")
} else {
console.log("WebExtension::executeScript: skipping eval script")
}
}
)(" /* A LOT OF MINIFIED CODE HERE */ ");