I would like to call an npm module from my code which is an es6 module. Is there a way to do this without transpiling or bundling my code? The reason I don't want to transpile is for simplicity and so I can see my code changes instantly in the browser when I'm debugging.
You can work with native ESM modules in the browser using the script type="module". It works only for browsers that support it.
index.html
<html>
<head></head>
<body>
<script type="module" src="my-script.js"></script>
</body>
</html>
my-script.js
import {stuff} from './module1.js';
import Stuff from './module2.js';
console.log(Stuff);
console.log(stuff);
module1.js
export const stuff = {b: 1};
module2.js
export default {a: 1};
Then setup a quick web server to see the page working:
python -m SimpleHTTPServer 7654
That said, if your problem is refreshing your code at every change and debug it in ES6 dev mode, I recommend sourceMaps as the solution. With sourceMaps you can see your code working compiled (or "transpiled" as you like) as in production while debugging the development version in ES6. Webpack (or alternatives) is very optimized right now and can do partial compiling very quickly reloading the browser at every save.
Vue Devtools works on all demos/examples online but not on my local pages. Even with the following, the Vue Devtools icon remains gray ("Vue.js not detected"). Why?
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app"></div>
<script>
Vue.config.devtools = true;
</script>
</body>
</html>
The Vue source you are using there looks to be minimized / production build to me. You need to use the non minimized / non-production build. Try https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js instead.
Also if you are working with local files i.e. accessing a page like file://... then "you need to check "Allow access to file URLs" for this extension in Chrome's extension management panel." see https://github.com/vuejs/vue-devtools
You must add at-least 1 instance of vue, for the devtools to detect it. So, do:
new Vue({el: '#app'})
You can try to refresh the browser first.
If didn't work, make sure that if you're compiling CSS and JavaScript to have have development compilation for both not a compilation for production with minified files
If at least one file is minified for prod, devtools will not show up
I'm using the Swashbuckle NuGet package to create Swagger documentation for my API. https://www.nuget.org/packages/Swashbuckle
I'm trying to make some minor changes to the UI - essentially just to add some corporate branding to the header.
I have added two files as embedded resources to my project, in a directory called resources.
These are injected into the UI via:
.EnableSwaggerUi(c =>
{
c.InjectStylesheet(thisAssembly, typeof(SwaggerConfig).Namespace + ".Resources.Swagger.css");
c.InjectJavaScript(thisAssembly, typeof(SwaggerConfig).Namespace + ".Resources.Swagger.js");
}
Which results in the following link being added to rendered page.
<link href="ext/ang_nav_api-Resources-Swagger-css" rel="stylesheet" type="text/css" media="screen">
This is all correct and the stylesheet works as expected.
However the .js script doesn't appear on the client.
Changing the c.InjectJavaScript to c.InjectStylesheet does inject the file as a <link> .. so I'm happy that the file itself is correctly embedded etc.
What could be wrong here?
The .js script will not appear on the client. (not on the way you would expect)
Look closely to the code of index.html:
https://github.com/domaindrivendev/Swashbuckle/blob/8223bedae706fec612c98ebbcee6b2d7033ae349/Swashbuckle.Core/SwaggerUi/CustomAssets/index.html#L98
Your customScripts will be loaded dynamically on the onComplete event
$.getScript(script);
I have the following code with a simple working Vue.js application. But the vue.js devtools is not responding. It was working well a few days ago, now it's not working anymore what could possibly be going wrong? when I go to https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd, it says it is already added.
<!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">
<script src="https://unpkg.com/vue#2.1.6/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<div id="application">
<input type="text" v-model="message">
<p>The value of the input is: {{ message }}</p>
</div>
</div>
<script>
let data = {
message: 'Hello World'
}
new Vue({
el: '#application',
data: data
})
</script>
</body>
</html>
One alternative is to set up a local web server, as the OP already stated.
The other - which IMHO is faster and less harassing - is letting the extension have access to file URLs, which is disabled by default.
Simply go to chrome://extensions and leave the "Allow access to file URLs" box checked for Vue.js devtools.
Sources:
https://github.com/vuejs/vue-devtools#common-problems-and-how-to-fix
I tried all of the ways presented in answers here, but none of them worked for me (neither for chrome nor for firefox).
Finally I found an answer: If you still have this problem, you can try to uninstall the current version of Vue extension and install beta version: https://v3-migration.vuejs.org/breaking-changes/introduction.html#devtools-extension
Remember to restart your browser afterwards.
UPDATE: 2021 May 30,
If you are using Vue 3, old dev tools versions won't work, so just use the new beta version.
https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg
To solve this, simply go to chrome://extensions/, scroll down to the Vue.js devtools and enable the "Allow Access to file URLs" by clicking on its checkbox.
Source: https://github.com/vuejs/vue-devtools/issues/236
Had the same issue and solved it by adding
Vue.config.devtools = true;
after Vue.js import script, then take look at chrome devtools. You will see a tab called Vue to inspect your vue instance.
reference: https://v2.vuejs.org/v2/api/#devtools
I found out the answer, I was viewing a plain html file on my computer which was making the vue.js tool not load. I loaded up my local xampp server and ran the application from the local machine server url again and now vue.js devtools is working! :)
Also you can disable with Vue config:
https://v2.vuejs.org/v2/api/#devtools
in the extensions folder in chrome browser, under the details tab in vue devtools extension, check the box having allow access to file URLs,
this worked for me..
If you're using Vue 3 and experiencing this issue, try installing the beta version of the Vue Devtools. It may help until the stable version gets the major refactor.
I had the same issue & solved it by:
Installing this extension Vue Dev Tools Beta Chrome Extention
Reloading the chrome browser.
i had this problem, and i was expecting the vue-devtools to work by just including it. i had it console log the version
console.log("Vue Version " +Vue.version );
but this didnt work to actually load an instance of vue.
took me a few minutes, but once i actually created a vue instance, then it worked. this was the hello world example that made the devtools work :)
let data = {
message: 'Hello World'
}
new Vue({
el: '#application',
data: data
})
I solved the same problem.
But in my case Vue.js Chrome Devtools didn't detect Vue.js because in html file was <script src="https://unpkg.com/vue"/>
I replaced it to <script src="https://unpkg.com/vue"></script>
Now Chrome Devtools is detecting Vue.js perfectly.
Thanks for exapmle above.I use vue#2.4.4 and open my html by file://
In the case of Firefox, install the beta version of vue-devtools, which supports Vue 3.
If you have already turned on Allow Access to file URLs in chrome://extensions/ -> Vue Devtools and it still does not work, try reinstall the Vue Devtools, might work for you.
check if vuejs app is not embedded in an iframe such as in a storybook app.
the hack in such a case is to work outside the parent frame working directly on the url of your iframe and the vue devtools should work fine.
I'm using Vue in electron and I have the electron main "app" separated Vue's "app".
When in the the debugger console, typing Vue was giving the error Uncaught ReferenceError: Vue is not defined
Here was my fix
window.vue = new Vue({
components: {
App,
Login,
},
router,
store,
template: '<App/>',
}).$mount('#app');
The work-around was assigning window.Vue so the devtool could find it.
The same problem here, and I've solved it.
If you are developing in the localhost environment and using Chrome Dev Tools then you need to give permission for the Vue.js extension to access the local files on your computer.
Config your Vue.js tool in Chrome extensions
Search for "Vue.js devtools"
Click on details
Check the "Allow access to file URLs" checkbox
In my case I just had compiled for production npm run prod - which was the issue. As I ran in dev npm run dev, it started recognizing Vue.
I have a problem. I had a app on the manifest v1.
But now it tells me to change it to v2. But it gives me an error like:
Refused to execute inline script because it violates the following
Content Security Policy directive: "script-src 'self'
chrome-extension-resource:".
I tried to change in the manifest:
"web_accessible_resources": [
"jquery-1.7.1.min.js",
"plugin.js"
]
But in the html code, I have:
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script src="plugin.js"></script>
How do I put it now? Should I delete that? If i delete it won't run! My popup doesn't even opens anymore :|
Hope you understood my problem, thanks
(I'll thank more if someone gave an example of API v2 using javaScript to download :) )
This error usually means that there is some script being executed directly inside your HTML page, not included via an external javascript file.
For example:
<script type="text/javascript">alert('hello');</script> embedded inside your html file is an inline script. The correct way to do it would be
<script type="text/javascript" src="hello.js"></script> .
Your file hello.js would include alert('hello');
I hope this helps.