Suddenly my Vue.js devtools stopped working. I had it in the chrome for like 2 years (since I started developing Vue.js). Now I can't see devtools in chrome. It happened yesterday just like that - I was using devtools for a while, then I was working on something else and after a while, I noticed something - devtools is away. Even though the extension is saying that devtools works:
Why it is not "my" problem:
I use it for 2 years with no problem, until now
It was working in the morning, then it "just" stopped
Now it doesn't work on any project, even I know it worked before
I'm not using production mode, minified version, etc... I compile it through webpack and worked before.
It doesn't work even on the simple-fresh Vue.js app *
Why I tried so far:
Hard-refresh website (close and reopen devtools of course)
Restart browser
Reinstall extension
Tried this version and also this bugfix version
Logout and login from the account
Enabled all settings for the extension:
OS: macOS Catalina 10.15.4 (19E287)
Browser: 83.0.4103.61
Vue.js DevTools: 5.3.3
* Fresh Vue.js app code looks like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>
And it still doesn't work (yes, the extension still says "Vue.js detected on this page. Open DevTools and..."):
I experienced this, too, both for Chrome and Firefox.
The unfortunate solution for Chrome was updating it to the latest version (today, that is 83.0.4103.106, 64bit on Windows).
For Firefox (77.0.1, 64bit) I disabled all other extensions, loaded the page without Firefox Devtools open, then hit F12 and the Vue tab popped up.
In general, disabling any other extensions (think of "Ad Block Plus" or "I don't care about cookies" for example) might help.
[EDIT]: Adding another case I experienced, when the Vue tab does not show up in Chrome's Devtools:
load the page without Devtools open
press the Vue Devtools button in the extensions area (might say "Vue.js not detected", but don't let that bother you). In some setups, this step is crucial.
only then open Devtools by hitting F12. Vue tab should appear (check to the very right of all tabs, you can drag it to the left)
If using Vue 3, you need the new version of the extension that is currently still in beta https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg?hl=en
Well another reason why Vuejs devtools might not be showing is because you ran npm run production or npm run dev so in that case the extension will detect Vuejs but won't show in devtools.
So you'll have to either run npm run dev or npm run watch.
Close devtools, reload page and open devtools
What I found out is I had to do Ctrl+C to quit current process, then run "php artisan serve" again, then Vue tool shows up in Chrome
This happened to me several times in Chrome. I just close the inspect and open it again to see Vue Devtools in inspect tabs.
To me embedding VUE versionless via unpkg helps. It pulls the latest version. Now the browser Vue Devtools show up.
For what it is worth, and may it be helpful to someone ending up here: error in the code may hinder vue devtools from showing up. I encountered this when calling data from pinia store in router/index.js.
The command to use headless Chrome to print webpage as PDF is chrome --headless --disable-gpu --print-to-pdf https://www.chromestatus.com/. The wkhtmltopdf has a feature --window-status ready_to_print to do so.
I ask this question because when I print this webpage contains MathJax.js, it has an error as follows:
The page source of that webpage has the following lines related to mathjax
<script src="../scripts.js"></script>
<script src="../../MathJax/MathJax.js?config=TeX-AMS_SVG"></script>
I would like to ask if there is an option so that Headless Chrome will wait until the page is fully loaded before printing?
We can use two options to achieve this goal: --run-all-compositor-stages-before-draw and --virtual-time-budget=10000.
If i clear history of chrome browser and load a page, how's certificate is expired.
So the page is loaded for first time in the browser with expired certificate.
I can click on input box and type text in it, but the cursor is not showing.
The cursor shows if i change the tab or switch to another application and come back to the browser.
This issue observed only for the first load of page without any previous browser history and expired certificate.
If i want to observe this issue again, i have to clean browser history and reload the page or open it into incognito mode.
Issue observed in Chrome browser Version 59.0.3071.115 only.
It is working fine in older versions of Chrome browser.
The code is writing in jsp and running using java eclipse (tomcat).
<html>
<head></head>
<body>
<input>
</body>
</html>
I want to open IE browser from chrome for some backward compatibility in application.I am partially successful in it.Now Problem is IE URL contains registry name due to which requested site is not opening.when i click call IE i'm getting "ie.ftp:URL" in IE address bar instead of URL.
<html>
<body>
call IE
</body>
</html>
Downloaded the NPAPI hello-world plugin from https://github.com/axgle/npapi-chrome-plugin-helloworld and packaged it as a chrome extension (crx) using Chrome developer mode.
Loaded the above extension in chrome browser and tried to open test.html (provided with above plugin) in chrome browser. But it says "Could not load plugin"
Below is the source code of test.html
<doctype html>
<html>
<head>
<script>
window.onload = function(){
test = document.getElementById("pluginObj");
alert(test.sayHello());
}
</script>
</head>
<embed id="pluginObj" type="application/x-helloworld">
<body></body>
</html>
As per my validation, plugin is getting embedded (since on altering test it gives HTML document object) but unable to invoke sayHello method of the plugin.
However when I tried to load the above extension in another PC over there it loaded properly and was able to invoke sayHello method of the plugin.
Both systems have same OS (Windows XP + SP3) and both are using same version of chrome browser (23.0.1271.97 m)
Appreciate any help on this front.
When you added it to the CRX did you mark it public? If you don't it won't be visible outside of the extension.
See the relevant docs
Here is another relevant question: Google Chrome Extensions and NPAPI