Can I use dev tools persist with live site? - css

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

Related

Brackets live preview not working suddenly

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.

Can't change the css in SuiteCRM

I am working on SuiteCRM, and i want to change the CSS of my website in order to personalize it but there is an issue.
When i am changing the "style.css" of the SuiteP Theme, the pages aren't changing at all. Here is my question:
Does someone know how to change the css of this CRM and can help me to fix it ?
Thanks a lot
Make sure that your active theme is "SuiteP".
You need to know that SuiteCRM store things inside "cache" folder and you are doing changes without refreshing cache files. Cache files location will be cache/themes/SuiteP/css/style.css. So for quick changes, you can use browser developer tools.
Moreover, if you change core style.css then empty cache directory and (hard)refresh your browser. If cache files don't exist then Suite will build new using core file.
Like Star previously mentioned, Suite does cache the CSS.
Though, if you're not updating the SASS file, and just updating the CSS directly, your changes will be temporary for when the CRM next re-builds the CSS (I believe this is part of the Repair and Rebuild process in the admin section), your changes will be lost as the CSS file constructed from the style.scss file.
I'd recommend installing sass (via a gem or other means, however you choose), making changes to the scss then recompiling the css (or watching for changes if working locally, which I hope you are for working with Suite) when you've applied your changes.
If you still don't experience changes, try a repair and re-build or delete the cache directory and let it recompile on the next page load.
there are 2 options:
change core file and then delete cache contents. Refresh your page twice.
made changes in cache file. Make sure developer mood is off. Once you are done then copy it core file.
Create a new subfolder CUSTOM, copy the CSS files that are under suiteP (or the current theme) into the new custom. copy the whole path with folders, even if the folders are empty.
So the new path for the sytle.css with be /costum/theme/....../css/sytle.css
Change the file under the custom folder. The previous answers are not correct. This is well documented under the suite CRM docs.
Sometimes it doesn't work. Try next steps:
SuiteCRM better to use in development mode.
Not always the cache files deleting works for me. Better to use the tool in Admin panel - Quick Repair.
Sometimes good to clear browser cache (in dev mode reload a page by right clicking the refresh button).

How To Recover CSS Rules From A Corrupted CSS File

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.

Why did my css not work until added to project?

I have an asp.net mvc project, and I replaced the default css the wizard built with the iui css and javascript package. They were placed in ~/Content/iui/ folder. When i ran the site through the dev web server, the css didnt get used. I managed to fix it by adding the iui folder to the project in the project explorer. That's all I did, the pages already the script and style tags set up properly.
What is going on here? I'm sure MSVS is up to something behind the scenes, and I'd like to understand why it did this and why what I did produced the behaviour that it did.
Look in the "property pages" for your website project (VS Menu: Website -> Startup Options). Under "MSBuild Options", the "output folder" setting is the path that the Visual Studio Dev Web Server uses when you run it. Only files that are part of the project get copied to this directory.
This is the reason why even though, you added the files to correct folder, it was not the one that the Dev Web Server was looking at.

Loading a video from the local file system

I have a swf that is run from C:/ in the browser instead of a server (long story) and that swf loads a video that it located at ../../videos/video in relation to that swf.
Problem is, When I run it in Flex, everything is cool. Running locally, it can't find the file (not a security error) and is throwing a connectionError.
Any ideas?
NOTE: This seems to be a Windows specific problem, it's running on my mac with the same security settings just fine.
Flex Builder has a file that it adds all of your bin directories to in order to allow the debug player to get around the local security restrictions.
Here's a blog post on the subject.
Essentially Flexbuilder tells Flash that it should trust the bin folder... if you do a search on your development machine for the file flexbuilder_plugin.cfg, you should find it in a folder called FlashPlayerTrust in roughly the same area you normally find SharedObject files. If you open this file in a text editor, you should see pretty much every path to every bin folder for every flex project you have ever worked on. And suddenly everything gets so much clearer.
You can do as fenomas suggests and add any directory to your trusted list. You can also follow the advice from the above blog post.
So I created a new file and placed it next to this flexbuilder_plugin.cfg file, and called it MyProggy.cfg. Flash is configured to read in all files in this folder and parse all paths out of it, and any applications run from these paths will be considered "localTrusted" and will act as they would when run from Flexbuilder. Inside this text file I put one line: "c:\program files\my proggy" and saved it. I then had to restart Firefox for the change to take effect. I also had added a text label to my application and bound the text property to {Security.sandboxType}.
I would suggest getting HTTPFOX for Firefox which is a sniffer. Then you can see what is failing. In my own search I found that FLV's are always relative to the SWF, even when loaded on the WEB. Every asset that I have loaded is relative to the index.html file except for FLV's which always remain relative to the SWF. Being able to watch the data flowing, or attempting to flow to your site is invaluable.
This also explains why some people have no issue loading thing locally but then run into problems on the web. If their html file that is loading the swf is in a different location than the swf then every asset other than FLV's have a different relative path when viewed online then they do when viewed locally.

Resources