So I am editing a website for an NPO, and I am using brackets to do so. Before today, live preview was fine, and showed the whole website. Starting today, when I open live preview, the website looks blank. However, when I use dev tools, I can see all the boxes in the site highlighted when I hover over its code. I am not sure what is happening, as I am still using the original code of the website.
I had the same problem suddenly and another threat helped me: Brackets - Live Preview not working
I tried this: Open Brackets > click on File > Open Folder and then choose the right folder, as in your local host server for your files.
So if your folders for all the files and your index page are in one overall folder (as example called "main" - C:\main) choose that folder and click open.
I had the problem that it didn't work because it wasn't directed to my "main" folder but a sub-folder, so it did not have access to all the .css and .js etc files.
Related
I've set up ftp-simple to connect to my remote server. Files show up fine, however directories appear with [DIR] next to them which, when clicked, disappear with a red line through it, as per image below (template-parts was the directory which I had just clicked on).
As mentioned, files are fine - they load perfectly, but it's the directories which have the issue.
Nothing shows up in the output log when this happens and I can't seem to find anything about this issue elsewhere.
The only solution I have found is this.
In vscode, go File->Preferences->Settings.
Then at the search area type this -> ftp-simple.remote-workspace-load-all <- and set it to false.
What this does is, when you first load a directory (the default path that has been set in vsc config), vsc is going to load only the content of this specific directory.
Then, only if you click another directory ([DIR]), it will start to download the content of this directory.
Trying to use Dev Tools Persist. Had a lot of trouble adding folder but eventually that worked. Folder is faded out and I can't "Map to File System Resource" (right click only shows this:
I tried using the "show editor in console" experiment (here and here) as a workaround but could never find it, despite enabling experiments.
I'm using dev off the live site. I don't control the site so don't have access to local files. I only need to update styles.
thanks!
Had the same problem, missing "Map to File System Resource". When my source maps included sourcesContent, the file mappings were automatically made and I could live edit my scss. Apparently chrome uses the content to find the right file.
node-sass --source-map-contents
My .css file was working fine but today I noticed the website is not acting based on CSS rules so I tried to inspect the rues on browser and surprisingly I noticed the CSS file is empty!
I tried to open the style.css file in Notepad++ and this is how it looks like
I also tried to open the file in Bracket editor which I got this message
Can you please let me know if there is a way to fix this issue and retrieve the CSS rules from these NULs?
If your file is indeed corrupted, and you have site backups as part of your hosting plan, restore your website to a point where your file worked. (Many web hosts that offer backups will store 30 days' worth, depending on your hosting plan.)
If you don't have such a hosting plan, go to Wayback Machine and search for your URL. Pick a snapshot date when your site was working. Look in your source code and find a link to Wayback's cached version of your CSS file. Copy your CSS from there.
Alternatively, try searching for your website in Google. Unless you have noarchive tags on your site, there should be a link right in your search results to access a cached version of your site. If Google last crawled your site before your file got corrupted, you should be able to access your cached CSS file through the source code (or a link in Dev Tools).
Finally, check out this thread:
https://groups.google.com/forum/#!topic/brackets-dev/4hEn8qs9MKs
You may be able to open the file in a third code editor and save it as UTF-8.
I am trying to use the live server package which works pretty much like livereload for editor Atom. The server runs fine, but the files do not get automatically refreshed whenever I make changes + save the files..
Not sure if this is normal, but when I open up the server on the browser, I am forwarded to a directory with all the files on the server. How do I change this so that the server renders HTML only and refreshes every time changes are made?
My php files with html elements dont open, so create the file like .html files, and everythings runs well. Use .atom-live-server.json on the root project to change some options like other browsers.
Edit 1: Have the solution !
1- Install Live Reload from livereload.com.
2- Install Live Reload from browser extension.
3- Copy and paste this before before body:
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
4- Execute live reload and the browser and still works for php files.
You haven't set the project folder for the live-server to operate from, or you've saved the file you want to view outside of where it is running from.
In the project window on the left, add the project folder that you are using, and remove anything else. Or save your file in that location.
I had the same problem with atom-live-server and Google Chrome browser. Finally made it work using these steps:
Open your Browser
In Project pane open the project folder that you want to test
Start the atom-live-server
It should automatically open a new page in your browser. Right click on it and select Inspect -> it will open Console window.
Your Live reload is enabled. Notice the message in the Console.
After you make changes in your javascript or html in Atom save your changes (Ctrl + S) and the browser page will be updated.
I fixed it by adding the <head> and <body> tags to the html file I was editing. (even though I don't always include them anymore at least one is needed for the "Live reload" server to work.)
Live reload won't work unless there's a tag in the HTML the script can be injected on (body, head, and svg).
see this github issue!
I have a index.aspx in the project root but the solution explorer does not show the file.
I first started out with a html file, then I wanted to convert it to an ASP file. So I pressed save index.html as... and choose index.aspx as the new file name. But then I started getting error windows when editing the index.aspx. I noticed index.html was still in the root of the solution but did not show in VS-2013 solution explorer. So I figured I get rid of the index.aspx inside the solution explorer but both files disappeared from my disk. I somehow managed to retrieve the index.aspx but I cannot get it in the solution explorer. When I open the file manually the error windows are gone but I'm afraid I might have broken a link I'm unaware of in the program by deleting it in the Solution Explorer.
-Edit-
I could just create a new webforms file and copy the contents but the issue described above feels strange and unexpected. I like to have it clarified.
You've deleted it from your solution.
Right click your solution.
On the toolbar at the top of Solution Explorer find the "Show all files" icon and click it. You can now see all files on the file system, not just those included in your solution.
Find the file, right click and include it in your project. It'll have an icon that looks like this: