I am trying to debug code that is inside HTML imports in webstorm? I am working on a polymer project and am trying to debug the web component declared in:
<link rel="import" href="core-collapse.html">
The breakpoints are hit fine in the loading page but no code is hit inside core-collapse.html.
WEB-10145 is fixed in WebStorm 9. Please try the EAP build
Related
The images are referenced in a razor component that's defined in a Razor Class Library in the "wwwroot/Images" folder.
I've included a project reference to this Razor Class Library in my Blazor Maui Client App.
The problem I'm having is that the image is not showing up.
Initially I had it as:
<img src="../wwwroot/Images/CISA_Logo_183px.png" />
then I tried:
<img src="_content/CSETRazorClassLibrary/wwwroot/images/CISA_Logo_183px.png" />
and I'm not having any luck getting the image to display.
Is there something else I need to configure in the Blazor Maui app to make this work?
I'm using Visual Studio 2022 Preview Version 17.3.0 Preview 3.0 and I'm on a Windows 11 Pro Version 21H2
The src is wrong. _content/CSETRazorClassLibrary/ is the wwwroot folder of the RCL. So the path should be _content/CSETRazorClassLibrary/images/CISA_Logo_183px.png . Here is a test I ran up to illustrate the path resolution.
<img src="_content/RazorClassLibrary1/background.png" />
#page "/"
#using RazorClassLibrary1
<h1>Hello, world!</h1>
<Component1 />
Turns out after I updated Visual Studio I was able to get it to work. So it appears that the version I had was the reason I could not see the image.
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:
I have a component in polymer 3.0. Currently only Chrome Version 67.0.3396.99 supports is out of the box.
And Firefox 61.0.1 gives error TypeError: window.customElements is undefined .
Edge gives the following error:
SCRIPT5007: SCRIPT5007: Unable to get property
'polyfillWrapFlushCallback' of undefined or null reference
settings.js (15,14). SCRIPT5131: SCRIPT5131: Function is not a
constructor.
Polymer docs are not clear and don't have step by step guide that works without issues. Can some one provide tried and tested steps to make Polymer 3.0 components work in latest browser and also in older browsers like IE11.
Install polyfills:
npm install #webcomponents/webcomponentsjs
Then load webcomponents-loader.js to check and load any polyfills your browser needs. In your index.html, before any reference to web components add this:
<script src="node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
Hope this will help someone!
I was able to get it running by adding webcomponents-loader.js like:
<script src="./node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="./components/subscriber-modal.js" type="module"></script>
But now I need to find a way to convert ES6 WebComponent to ES5 so as to use
<script src="./node_modules/#webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
to run the transpiled component. But just using babel gives require not defined error. So will try to use browserify.
Note that you have to load synchronously your webcomponents-loader.js, so make sure don't use async in your (in chrome it works well with async, but ie doesn't).
At first time I encountered the same issue, and my script is below:
<script src="./node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js" async></script>
I use workspaces and sourcemapping to live-edit my SCSS files in Chrome with live reload functionality.
However the live-reload part breaks if I add a version to the stylesheet that is being generated by the SCSS. The stylesheet is still saved and changed in the background, but Chrome does not inject the changes.
eg. <link rel="stylesheet href="style.css?v=255"/>
Any ideas on how to work around this?
This appears to be a current limitation on Chromes part and does also apply to plain CSS files. As a simple workaround you can execute this bookmarklet before attempting to change your source file:
javascript:(function(){var s=document.getElementsByTagName('link');for(var i=0;i<s.length;++i){var q=s[i].href.indexOf('?');if(q!==-1)s[i].href=s[i].href.substr(0,q)}})()
(What it does is look for <link> tags with an href containing a query string, and removes the latter if found).
I have a webapp built with angular/grunt/yeoman.
This is the problem that I have:
File home.html:
<h1>hello</h1>
I grunt build, then check the page in my brower. Everything is fine.
Then I change
home.html to
<h1>hello 2</h1>
I grunt build, then in my browser I still see hello if I navigate to this page by clicking links. If I refresh the page with the browser button, I see hello 2.
Why is that ? How to tell grunt to build the app so the browser re-fetches every html page ?
Note: I have no problem with html/css since they are concatenated into a single file, and the file name changes every build.
I am using chrome.
You could:
Use a plugin to clear the browser cache, for example: Clear Cache
Use a web server that explicitly forbids caching