I have coded an html and css website in VS Code. Viewed the project in a web browser (Chrome), looks good. I am on a team and we have created a project using Razor Pages in Visual Studio 2019. I copied my VS Code to Visual Studio 2019 to the appropriate page, in this case WelcomePage.cshtml. When I went to view my Visual Studio 2019 page in a browser (Chrome), it didn't look the same. The styling was off. I have ensured the css and images are pointed to the correct folder. Ensured all my tags are in order. I also checked to see if the Layout.cshtml file and bootstrap.css files were interfering and it's not. I am still experiencing issues with how the page looks in VS Code when I view it in browser compared to what it looks like in Visual Studio 2019. I appreciate any advice and guidance you can share with me. Thank you.
I commented out the Layout.cshtml file and bootstrap.css file. Created a new project where I deleted the Layout.cshtml file, the bootstrap files and js files. Still had the same issue.
Related
When I am using Visual Studio code, I am coding in HTML and CSS.
When I open the Browser Preview button, it shows the changes I am making and some things appear as I want it to be.
However, when I download the saved file as an index.html file, the look does not appear the same as the Browser Preview.
What should I do?
File extension must be .html
Then, first of all make sure that all the time you are saving your file using ctrl+s. You can do this automatically by changing in setting.
You can reinstall any browser preview extension like this one.
Restart the VScode and check again whether it's working or not.
Also, You can setup your vs code again.
I just reinstalled windows on my computer. The problem here is that when I was using the visual code editor before reinstalling windows with the live preview extension and it ran perfectly, but now after I installed windows the VC do not give me live preview like before.
It is just showing the HTML structure and not the linked CSS and Javascript files. There is no styling and formatting being shown on the page even though the page displays perfectly on the browser, tried everything but nothing worked. Note that both windows versions are the same no changes in them.[Only HTML shows up][1]
[no definitions found said by vs code editor also]
Yes, it only shows the HTML preview without CSS. You have to use "Live Server" extension for that.
Download that from here:
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
GitHub Source:
https://github.com/ritwickdey/vscode-live-server-plus-plus
Preview:
does a .vs code folder appear ? This problem happened to me once and by deleting the file everything went back to normal. IDK if it will work for you but it worked for me.
BTW there is a Youtube video on that topic, here it is a video for CSS files not working on live server
I have a very basic html file that look like this:
then I opened it with Live Preview extension:
then I clicked the hamburger menu and opened the 'Devtools Pane':
The issue is why my elements section looks complicated like this:
however, if I open the html file with browser and open developer tools everything is normal:
I tried uninstall and install Live preview extension but this doesn't solve the problem.
Is there a solution to this?
thanks in advance.
The Dev Tools Pane looks like this because that is Visual Studio Codes developer tool pane. You are seeing all of the elements and scripts that Visual Studio Code uses plus your document. You will get the same results if you open the developer tools in Visual Studio Code via the command palette. This isn't something specific to this extension.
This answer provides some insight on why this is, but basically it's because Visual Studio Code is built like a desktop application but with web-based (like?) technologies such as HTML and Javascript.
If you are looking for specific elements in your document, I recommend you use the element picker icon in the top left of the dev tools to inspect it, which will automatically navigate the HTML code in the developer pane to the element you wish to inspect. Or, open the file in a browser separately as you have.
I am creating an Excel web addin using Visual studio, but when I am making any changes (adding any button or hiding an element) to my .html or .js they are not reflecting in excel or DOM Explorer files. I tried clearing cache, browser history. Nothing seems to be working out!
Please suggest!
I am using Visual Studio Code on Mac and installed Live HTML Previewer extension as well. but this extension shows neither failure nor displays side window to show live changes.
Any idea?
Am I doing something wrong or this extension isn't being supported by Visual Studio Code editor anymore?
Thanks a lot for your gently feedback!