I'm so close to being able to actually start actually using less, but for one final roadblock: I can't get the less files to show up in Chrome Developer Tools. I gotta have my developer tools.
I'm using Codekit to compile the less to CSS and to generate the source map, both of which CK seems to be doing. Chrome is even auto-refreshing when I save less changes. But there is only one css file referenced in the inspector, and that is the master, compiled bootstrap.css file.
At one point I saw the less files in the inspector, but no longer. I have no idea when they stopped showing or why, but I can't seem to get them back. I tried turning on Experimental developer features in Chrome, no dice. I made sure Codekit was generating a source map file in the CSS folder, yes. I even opened the map file, but immediately closed it again. Basically a massive, single line of text that I can't make heads or tails of. No help there.
I saw there was a way of adding the less folder to the Chrome workspace, but from what I can tell this will require me to change my entire folder structure, moving the less folder into the root folder of the site, which will have the cascading effect of me having to remap the file source and destinations in Codekit (for starters), which I'd like to avoid (especially if it doesn't work).
I realize there is little in the way of specific info here, but I'm not sure what else I can provide. I'm hoping there is a key step I'm missing, but two hours of googling keep turning up the same results. Anyone have any suggestions?
Well, looks like I've solved the problem, but still no idea what caused it to begin with.
When Codekit generates the source map, it's also supposed to append a line at the bottom of the target CSS file:
/*# sourceMappingURL=bootstrap.css.map */
I found this missing line in a file I believe I'd mistakenly targeted earlier in this confusing process. I copied and pasted it to the bottom of bootstrap.css (where for some reason, it was not present), and bingo, less files in the dev tools. Now if only I knew what I did to make it go away in the first place... you know, so I don't do it again. Here's hopin'. If you or someone you know sees the error of my ways, I'd be very grateful for any edification on the subject.
Related
I'm trying to customize a theme for a Magento 2 website (it was purchased), and for the most part I know where most of the .css calls are coming from. However, there is one sub-menu, I cannot find the source css file for the life of me.
Normally I use Chrome's inspection window to identify the css that is generating the colors/details that I'm looking for, and then search the source files for the same .css reference, and then make the modification as needed.
However, as mentioned I'm struggling to find a specific piece of css code, and I'm wondering if there might be a better way to find what I'm looking for?
http://bricss.net/post/33788072565/using-sass-source-maps-in-webkit-inspector - Try this one!
https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3 - this is how you set up your css source mapping by using default developer tools :)
The question doesn't explain the whole situation. I'm aware of the Workspaces and of SASS source-maps. I'm already able- from the Styles panel- to track the line in the scss file where the specific rule is that I want to change.
That in itself is already a huge achievement, but what would improve a lot my workflow would be being able to visualize the changes as I'm making them live, and have DevTools save them automatically. That way I could instantly adjust elements.
That already can be done in plain CSS. In fact, DevTools is already changing the css file instantly even with SASS running. The problem is that as soon as you modify the scss file again, SASS will recompile and the change in the css file that DevTools made will be lost.
An image is worth more than 1000 words, so:
I'm changing the left property of the red div instantly with my arrow keys. I'm visualizing the changes also instantly. No need to make changes manually, press Ctrl+S, see how the element looks, readjust, save again, etc.
I know I want to change the left property so I click on the scss file and make the change in the Sources panel. Then I save the changes and see how they look. But I can't visualize them instantly as in plain CSS.
Is there any way to do what is already instantly done with css files in the Styles panel but with scss files?
It doesn't have to be done necessarily inside DevTools. Maybe there's an option for SASS to watch for changes in reverse (not only from scss to css).
I was looking for an answer in both directions but to no avail. Any help?
Unfortunately I don't think there's a good answer to your question. There are some ways to convert CSS to SCSS, but they're not intended to be an ongoing process, just a one time conversion.
It's best to only have the conversion one way, if it were bidirectional there'd be a lot of 'what if' situations with collisions that would get really hairy. It isn't a feature I'd want to try to figure out :P
In my workflow, I make small adjustments in the styles inspector (like you are above) and when I'm happy I copy those values to my SCSS file and recompile/reload the page. I think it's about as good as it gets without getting into really strange (probably) unexplored territory.
Small note: Chrome isn't actually editing the CSS file when you change it in the style inspector, it's just making adjustments to the DOM temporarily as if the changes were made where you made them. That's why it's lost on reload.
DevTools has an experimental feature called Live Sass
If you enable the "live sass" experiment, you can edit Sass code in the Sources Panel and see results instantly, I've made a gif of how this works here: https://umaar.com/dev-tips/103-live-sass/
The catch is: since it's experimental, it might not work as expected!
I don't know if anyone has ever had the same struggle as me : the time to compile your scss to css can become too long!
I'm working on a project over a theme/template. I need to override it but sometimes I still need it and I have to edit it.
So my question is pretty basic and I haven't found an answer yet; I don't want my compass watch to watch the whole file but only, let say, the first 5000 lines.
Is there a way of doing it?
I'm done with googleing, I have to ask you folks...
I have a static web project (not JavaFX, thus no JavaFX toolkits!) in Eclipse Kepler. Now thats the messy road I went:
I created a .less file (for the first time)
Eclipse starts nagging with the "Do you want to add the LESS-project nature?"-popup
I clicked 'no' 10 times (pops up every time I start Eclipse)
then I clicked 'yes' to add the nature for making this stop (could not find ANY workaround for that #$%!+"* !)
Now I face this travesty:
The built in CSS-editor marks every trivial property as unknown. I have no clue how to fix this. I removed the less-nature and restored my old .project file too but the warnings (and even real errors) persist. I found out that rewriting the properties does not summon these warnings!
No, I won't rewrite ~6000 lines of css...
Please help. Please make it stop...
Sorry, found the solution (dumb as can be):
delete project (only!) in Eclipse
re-import project (which completely revalidates the project structure)
errors are gone...
Although this solved my problem, I feel uneasy about the fact that I could not find any possibility to do a complete re-validation without to delete and re-import my project. This is pretty nasty...
Right click project Configure->Remove LESS nature.
My breakpoints have stopped working properly in the latest XCode 4 release. With no change to the project settings, the breakpoints no longer break at the line they are set.
For instance, in one function I can set a breakpoint anywhere within it's body, but the code will always break at the last line of the function.
In another instance, I can set a breakpoint anywhere in one function and the code will break at a line in the middle of a different function in the same file! Tracing through after the break shows that it did break in the wrong place and it's not just a file / debugger sync issue.
I have no idea why this has started. It did however seem to start on new breakpoints while old ones worked. Any new breakpoints I add break in the wrong place. And recently, some files now don't even break at all! I can only assume the breakpoint is so wrong it's moved into code that's not called. I have done numerous internet searches and forum searches for this problem, and although I have found people with similar issues, there was either no solution or the solution listed (rebooting device, swapping debug output, turning off optimization etc.) haven't worked for me.
It is worth mentioninig I'm mostly coding in C++ using .mm files. For the past year of development in XCode 3, and for the last few months in XCode 4 things have been fine! I have debug set up correctly. No optimization on a debug run, no dead code stripping and I'm using the LLVM compiler 2.0 with DWARD with dSYM debug file. However, changing these values makes no difference.
Please help, it's driving me mad!!
An update to this. It's started happening again on a brand new machine with a fresh Lion and xcode install. The whole editor is out of whack. Example below of the errors appearing on the wrong lines.
From what I've read all around, Xcode tend to get confused with breakpoints and the way to get rid of the out-of-sync problem is to clean the "Derived Data"; two ways of cleaning it so far I've found (instructions are valid for Xcode 4.x) :
a) go in the organiser, under the Projects, choose your project and hit that delete on the Derived Data
or
b) go in the Product menu, hold the ALT button on the keyboard and observe that the menu are changing... so the clean transform to "Clean Build Folder..."
With-in "Build Settings" under the project target change the "Optimization Level" for "Debug" to "None".
I found that this fixed the issue for me.
I have fixed this, although I haven't found the root cause.
I removed the references from the project for the files that were not working with breakpoints. I then did a full clean and went into the folders and deleted any build and temporary data. I then opened the project bundle and deleted all data except for the project file itself. I then compiled so it threw up errors due to the missing files. I then put the files back in the project.
Now, the exact same files work fine with breakpoints!
No idea why but happy it's fixed.
Have you cleaned your targets? Shift-Cmd-K.
This started happening to me after I upgraded to XCode 4. I just deleted all breakpoints, did a clean, then re-added my breakpoints. Seems to work OK now.
I have figured out why this happens now. As mentioned in one of the replies you can fix it by deleting the derived data. This will always fix the problem. The editor for some reason loses it's relationship between the source code and the markup of the code it uses to cross reference breakpoints and errors etc. Deleting the derived data forces it to recreate this.
I believe that this only happens with files using C or C++ code. Apple seem to ignore C++ developers on iOS. I know a lot of professional game developers and every single one uses C++ to write games. Apple's lack of support is annoying.