I am using Visual Studio 2013 with Web Essentials 2013 and when using browser link, it is not finding unused css when using both IE11 and Chrome 31. I have tried everything I can think of and it won't show me the unused css class. Everything else with browser link seems to be working except this function. Does anyone have any ideas how to get this to work?
Run the project and make sure Browser Link is enabled. While running there is an icon on your toolbar with a round going arrow. Click the downarrow next to it and click "Start Recording (all browsers)".
Keep an eye on your Error List window where it should start showing the unused CSS. When click through your website the list should decrease as it ticks off the CSS it encounters.
Make sure that you go through all the paths of your website otherwise some CSS might be marked as unused while it actually is (jQuery addClass for example).
Source: https://www.youtube.com/watch?v=bM5oz_2OidI
Related
When I use the HTML5 video and audio tags in my code, video and audio appears when I load the file in a browser. They also appear when I use a HTML preview package in Atom, however, they appear greyed-out and are not interactive when I use Visual Studio Code and a HTML preview extension there.
At the bottom of the preview in Visual Studio Code, is a message:
Some content has been disabled in this document
When I hover over the message I see a tooltip
Potentially unsafe or insecure content has been disabled in the HTML Preview. Change the HTML preview security setting to allow insecure content or enable scripts.
I found the "HTML: Change Preview Security Settings" option in the Command Palette, however, changing the security settings caused no change. The video and audio are still greyed-out.
I'm new to Visual Studio Code and the preview not being an authentic version of what will be in the browser is annoying.
in Visual Studio Code
in Atom
Has anyone else come across this issue and does anyone know why this is?
I know it is a bit too late but had the same issue. The security settings menu appears in a very right hand corner of the main window and has 3 dots as an icon. Click on the menu to open html preview security options. See attached pix.
Disable the change preview settings.
You can put your file in your Visual Studio Code framework. Then it will work...
i faced the same problem today and after some research i got solution
Reasons why it's grayed may be due to following reason:
you wouldn't have the saved audio,image or video in the folder where your html code is saved.
Solution:
make sure to save your file(code) and data(audio,image or video) in same folder.
use live server for output.
I am importing a lot of CSS & JS into my app and updating the links as I go. Is there any code inspection possible that will highlight these broken links to make sure I haven't missed any and to save me going through every file?
I know in other IDE's this is a standard thing so I am guessing there should be something in VS but I can't find it.
I'm afraid that it's not possible in pure Visual Studio.
But there is one trick which you can do using ReSharper which might help you and solve your problem. Take a look below:
What is more - you can configure ReSharper to show those "Path errors" not as warning but as errors! Then you will be able to show those during compilation.
Click "ReSharper" in the Visual Studio top menu, then "Options..."
There will be search box in the left upper corner of the "Options" window
Type "Path error" and hit return
Change all of the "Warning" to "Error"
There are a number of sites/tools as listed here that will check anchor links, css links, image links, JavaScript links, etc:
W3C Link Checker
Xenu's Link Slueth
Link Checker FireFox AddOn
Dead Link Checker
I have only ever used the W3C checker which seems to work quite well.
I just follow this tutplus tutorial for source map sass.
I cannot find Support for sass option in Experiment tab under the inspect element in chrome. Is it removed? Am I late to use this feature ?
My sass version is 3.3.8 (Maptastic Maple)
How can I make SASS editing work in Chrome Devtools?
I made it work. SASS support is no longer an experiment: It's now a standard.
I just follow simple steps to make it work.
1) Open your inspect element on chrome and click on gear icon which appears to the top right.
2) Enable the CSS source maps (which is I think its enabled by default. If not just check it. After enable the css source map don't close it.)
3) Click on Workspace tab on the left panel just below the General tab.
4) Add your source code folder by clicking the Add folder button (close the box.)
5) Go on Sources tab and find your scss file.
Now you can make changes and hit ctrl+s it will automatically change on your style.scss.
As of Chrome 75, here's how you turn on CSS source maps.
Open the browser's Developer Tools (Ctrl+Shift+I).
Open the dropdown menu in the top right corner, and click on "Settings."
Look for the checkbox that reads "Enable CSS source maps" and turn it on.
Just my 2 cents here. Kaspersky Chome extension was blocking my CSS mapping on Chrome Developer Tools. Didn't find anywhere how to add an exception to that...
I have "Box Model Hack" issue. I found out that in all browsers except Google Chrome. So I searched the solutions and saw that I should put -webkit-box-sizing property in CSS and define it as content-box
I installed CSS3 for VS2010 and restart it, then CSS 3.0 showed up in drop down list on style sheet tool bar in VS2010. I saw new properties coming from CSS3 but I cannot find -webkit-box-sizing
Should I need VS2010 SP1? or is there something missing? Besides, if there is another Box Model Hack solution for Chrome, please tell me.
All -webkit properties are specific to browsers running on the Web Kit Browser Engine and are not part of the official CSS3 specification.
You can simply type in the CSS you require either in your stylesheet or your CSS style code block. I dont think VS will include a menu item for it (and many other proprietry CSS properties).
Having said that, I've just found a CSS 3 Intellisense Schema that includes the items you're wanting.
When I debug locally in fire fox 2.0x many times my page won't have the styles added properly or the page will not completely render (the end is seemingly cut off). Sometimes it takes multiple refreshes or shift-refreshes to fix this. Is this a common issue or is it just me? Any solutions?
I want to add that this is happening in fire fox 3.x to me as well. I add my javascript to the pages dynamically and this might be part of the issue. This is when I am working locally with Visual Studio.
Update: This does happen in IE but it happens much more often in Fire Fox. The issue seems to be only javascript and CSS files not loading. For example I get jQuery is not defined, $ is not defined etc. I don't think I have local IIS to test this on but from the server it always works perfectly. Fire Bug shows all my css and javascript files to be requested and received.
This could be a problem with IPv6 and DNS of the Firefox browser. This issue is known to slow down Firefox on localhost:SOMEPORT. The effect would be that some external files won't load (css, js etc.) resulting in a partially rendered page.
You can solve this issue by simply deactivating IPv6 in Firefox:
Insert about:config in the Firefox address bar
Set network.dns.disableIPv6 to true or alternatively add localhost to network.dns.ipv4OnlyDomains
A different way to fix this issue, is to a remove the ipv6 address from your hosts file this way: open the file
C:\Windows\System32\drivers\etc\hosts
(with administrator privileges) and remove (or comment out #):
:: localhost
Make sure that you narrow the scope of the problem. Does the problem just happen when debugging from VS or does it also happen with local IIS? With server-based IIS? Does it happen to other developers in your company? Is it really just FireFox or does it happen to Chrome, Opera, IE, etc?
Assuming that you've already worked that all out, I would suggest installing a FireFox plug-in called "Tamper Data". Open that and refresh the page. You'll see a record of every connection from the browser to the server (for each html file, image, css file, etc). Look to see if any of the them are very slow or not completing (perhaps one of those files is taking a long time and FF is waiting for it to finish before loading other important files).
Assuming that all of the files correctly loads, you should consider checking that the syntax is valid (maybe there is some unclosed tag or quotation mark that is causing FF confusion). I use a plugin called "Web Developer", but there are a lot of other options out there.
You could also use a plugin called FireBug to view the HTML behind various parts of the page to see if there are any noticeable problems. You start FireBug, go to the HTML tab, click Inpsect, and move your mouse over something on the page, and it will show you the HTML behind it.
One thing to do would be to check the source of the page(s) in question. My guess would be that the local server that VS runs is not giving you the entire source of the page. One way to verify this would be to run exactly the same code in the debug environment, as well as from a "real" server like IIS 6. If the same behavior is seen on loading the page from both servers, as well as insuring that the full page source is being recieved by the browser(s), then it is a bug in Firefox and should be reported. This is especially true if other browsers, ie. IE, Chrome, Safari, Opera, render the page fully.
Are you comparing what you see in Firefox to what is displayed in the Visual Studio designer? If this is the case, then they are using 2 different methods to render the html and may not display the same.
Anything further on this folks?
I have examined the traffic using Firebug and it appears that when veiwing the response from the request for a style sheet, the response is just blank. After refreshing (sometimes multiple times) the age displays correctly and the response information contains the style sheet. I have not seen this in any other browser and it only occurs when viewing the app from Visual Studio.
2! Recently i had the same problem. Im using MVC 1.0 and I added a new stylesheet into Views/Share folder. And when i run the project, the page didnt render along with the css. If your web project is a MVC one so try put the css file into the Content folder.
Hope this help.
HaiVu.Doan.
In case anyone else finds this with newer versions of Visual Studio, I have to run VS as Administrator. This is something I keep forgetting to do, but once I right clicked on Run as Administrator when opening VS, the problem went away.
Initial problem, I could not get CSS to render when running a project from VS 2012 using Firefox as the browser. (IE worked just fine, btw.) The content would be there, but no CSS. This was the first post I found when I typed in my question.