I am learning Vue.js and am playing around with it using jsFiddle. Vue.js is natively supported by jsFiddle.
However, I can not use the Chrome Browser's vue.js dev-tools with jsFiddle, as it's not detecting it. The little "V"-icon always stays disabled, saying "vue.js not detected".
Now, the problem is, that jsFiddle renders the result in an HTML iframe, and dev-tools as is does not check any iframe for Vue.js apps, as for example, mentioned in this github issue.
I never managed to escape the iframe. Even when opening the framed content's URL in a new window, the resulting HTML page again contains an iframe.
How to use the Vue.js dev-tools with jsFiddle?
My solution to this is using the standalone dev-tools with node.js, as proposed by Geoff Baum in his comment on github.
Just install Vue Developer Tools globally:
npm install -g #vue/devtools
Then run it globally:
vue-devtools
In your fiddle, right on top, just add the proposed script URL:
<script src="http://localhost:8098"></script>
Here's a working jsFiddle, using the standard example: https://jsfiddle.net/suterma/zr2vtg84/4/
<script src="http://localhost:8098"></script>
<div id="app">
<h2>Todos:</h2>
....
</div>
Here's how it looks:
Related
I have a problem/question with the VSCode. Why doesn't the url of the img tag in my code work? The map is good and the other CSS code is working, the url-s of the img-s are the same...but it is not working in the VSCode's Live Server!
What is the problem? Is it a missing module, some setting, or Windows firewall?
I did not change any setting in the VSCode. Anyways it works with JSBin and CodePen.
Images are loaded on my html pages. But Firebug shows that it failed to load given url when I hover on the element on firebug panel.
That's obviously a bug in Firebug 2.x. I only found the related issue #3540, so you might want to file a new issue for it.
Having said that, Firebug as extension is going away with one of the upcoming versions of Firefox. It is implemented as theme for the Firefox DevTools instead, which don't have this issue. So, I suggest to use those instead.
Is that bootstrap's own thing that he/she/it uses to do something? Or is that an abnormal behavior? I see that in my Inspect Element feature of Google Chrome whereas I didn't wrote it in my markup. See this screenshot:
I believe that little tag is being added by the "Webpage Screenshot" extension.
On my computer, I went to chrome://extensions/ then disabled "Webpage Screenshot Capture" and the data-wssurvey attribute disappeared.
Also, there was a javascript error message appearing in the console for every page I loaded, and that went away after disabling the webpage screenshot capture extension.
Ok.
So I know this is probably a stupid question, but I've been traversing SO and Google for the last many hours for an answer and found nothing.
I'm currently creating a HTML5 mobile app using JQM 1.2.0 and Google Maps js V3 - just to set the context.
My problem occurs when I try to test the page in FF 18 desktop version. In every other browser, be it mobile or desktop, I'm not having any problems. Also, I have tried on both localhost as well as the server I'm deploying to, and it's the same result.
In my HTML file I have a relative link to css and js files:
<script src="js/general.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/mobile.css"/>
while my links to JQM etc. are absolute as I use a CDN:
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
When I use Firebug, I can see that the files with a absolute path are loaded fine, while the relative path links are ignored - or at least I think so, as nothing shows up in neither the Console or the Net pane.
When I check the Html pane in Firebug, it appears as if it has included a tag pr default (with the correct URL), but not if I try to view page source using the regular FF methods. Even though, I have tried to include a explicit base tag to my header and it changes nothing.
So, to sum up: relative path works fine in all browsers except FF, it it happens on both my server and localhost.
Update:
Tried moving the files to the root dir, but it didn't help.
Also, when trying to view the content of the js or css file in Firebug (pressing the arrow to the left of the tag in index.html), it just says:
Reload the page to get source for: http://localhost/~u040800/app/general.js
which, of course does not change after reload.
Nevermind - stupid mistake on my side!!
Note to self: when developing, do make sure that your add-ons are disabled before asking SO! otherwise, you make a complete ass of yourself!!
Yes, it is correct - I forgot to disable Ad-Blocker...
#robertc: Sorry to have wasted your time.
I was testing some HTML code I'm making, and while using the Developer Tools on Google Chrome version 22.0.1229.94 m, I saw the <body> tag has the attribute cz-shortcut-listen="true" (which of course is not on my code). What does it mean and why is it showing up? (I tried looking it up in google, but found nothing relevant)
It's being added by the Colorzilla browser extension.
https://twitter.com/brianpemberton/status/201455628143689728