So I'm new to VS Code... loved it from a preview in a Python tutorial.
I open it and start entering some CSS code I'm working on, yet the editor does not:
Make suggestions or corrections;
Highlight key words;
Seem to care or know that I'm editing a specific language (i.e.: CSS).
How do I tell it that's the language I want it to use?
When creating new files you can press CTRL + k then m or just click the language mode link in the bottom right of VS Code to specify CSS. That should trigger the autocomplete/suggest/syntax highlighting features. By default VS Code will look at the file extension when opening existing files to determine which language to select.
See https://code.visualstudio.com/Docs/languages/overview for more info.
How do I display all changes which I made using Chrome Developer tools?
Example:
open a website.
open Chrome Developer Tool.
change style attribute of a tag.
add new style to some css file.
change a JavaScript function.
How to see those changes? Something like:
page.html:56 Change style attribute of foo to bar.
page.css:21 Lines added: 21,22,23,24.
page.js:12 Line modified.
As of Chrome 65 there is a changes tab!!
Yes really, it is amazing :)
Open Dev Tools > Ctrl+Shift+P > Show Changes
https://developers.google.com/web/updates/2018/01/devtools#changes
So, local modifications work for any changes to the files that you make, but they don't help you if you add inline styles or change your DOM in any way.
I like to use a method where I capture the DOM before and after my changes.
copy(document.getElementsByTagName('html')[0].outerHTML)
That places the current state of the DOM into the copy buffer.
Paste this in the left hand column of a diff tool like vimdiff, http://www.mergely.com/ or Meld.
Then I finish my modifications and run the copy command again. I paste that into the right hand column of the diff tool, then I can see my changes.
Full article here: https://medium.com/#theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a
You may want to try the Local Modifications feature:
The DevTools also maintains a revision history of all changes made to
local files. If you've edited a script or stylesheet and saved changes
using the Tools, you can right-click on a filename in Sources (or
within the source area) and select "Local modifications" to view this
history.
Local modifications panel will appear displaying:
A diff of the changes
The time the change was made at
The domain under which a file was changed
Normally, you can right-click on a method and select "Go To Definition" (F12) or "Find All References" (SHIFT+F12). You can even go to the definition of a css class from your aspx page by pressing F12 (if your cursor is over the CssClass name).
Is there a similar shortcut for finding all the references of a css class from an external stylesheet? My reason for asking is that I have a stylesheet containing a bunch of css classes that may or may not be in use anymore, and I'd like to know which ones are actually being called without having to read through my code line by line.
Also, I've tried the Quick Find (CTRL+F) tool to search for a particular css class. It doesn't turn up any results even for classes that are in use, so either I'm not using it right or it doesn't bother checking my aspx page for whatever reason. (I suspect it's the former!)
PS I'm using 2010 Express edition.
You can use CTRL+SHIFT+F to bring up the Find and Replace dialog. In there, make sure to verify that the search scope is set to Entire Solution, and try that.
I'm trying to use Aptana Studio 3 instead of phpEd. But I'd like to have the code coloring like in Dreamweaver. I made these changes in phpEd, but I can't find where to change it in Aptana.
Also, I installed the jquery bundle, but I can't to get it working...
Thanks for your help.
Preferences:Aptana:Themes. Figuring out what keyword corresponds to what display object can be a bit tricky, but it is all there.
There's actually a ticket already filed to add a theme that matches Dreamweaver: https://aptana.lighthouseapp.com/projects/35272/tickets/1508-create-dreamweaver-color-theme
I'm looking at it now, but I'm running into some internal bugs (namely https://aptana.lighthouseapp.com/projects/35272-studio/tickets/2357-scope-selectors-with-portion-prefix-match-arent-matching-properly) that I need to fix before I can finish. In any case it should be in Studio 3.0.2 and hopefully I'll fix it today and it'll be in tomorrow's nightly (here's how to get nightly builds: http://wiki.appcelerator.org/display/tis/Changing+the+Update+Type).
As for editing themes yourself, you can see the current scope at the cursor by doing Commands > Bundle Development > Show Scope. Then use scope selectors that match that sort of scope (we adopt Textmate's scoping/theming rules: http://manual.macromates.com/en/scope_selectors)
Could you finally get your theme?
If you want to create your own theme then first go to: Window->Preferences->Aptana Studio->Themes
To create a new theme just click on the "+" sign next to the themes
list.
To add elements to your new theme right click the text in your
editor and click Commands->Bundle Development->Show scope.
Copy the last section you see to the right of the hint window that
appears.
In the themes elements list click the "+" located at the bottom of
the dialog box (next to "Scope selector")
Give a friendly name to your new element.
Assign foreground/background colors to your new element.
Paste the element's scope in the "Scope selector" input box (make
sure your new element is selected, if not, click on it).
I created a theme for PHP, CSS, HTML, JS and XML editors, similar to the old aptana 2 colors. If you want to get it you can write me to jgarcias.cr at gmail dot com.
Cheers.
When I'm working with CSS, I'll often test in a browser - say, Chrome - right click an element, click Inspect Element, and edit the CSS right there. The use of arrow keys to change things like margin and padding makes lining things up super easy.
It's not too hard to then take those changes and apply them to the CSS file, but it would be cool if I could just right click the selector in the inspector and select "export" or "copy", and have the contents available in my clipboard.
Does something like this exist?
I have found the answer to this, at least as of Chrome v14.
While in the Elements section, just click on the "filename:linenumber" link next to the CSS rules. The CSS file that shows up will contain all of the modifications.
This place exactly:
In Chrome, you can right-click a CSS file in the Sources tab and click "Local Modifications"
This shows you all of your local changes. Each revision is timestamped and you can rollback to any previous revision.
See the Live Editing and Revision History section of this tutorial.
Firediff is a Firebug add-on that tracks changes done in Firebug. It logs everything you'll do in the HTML pane (great) but also your brief use of the Web Developer Toolbar extension (not so great), say Shift-Ctrl-F to obtain a font-size information in px.
I have seen a Firebug extension in Chrome but didn't test it, I use Firediff with Firefox.
In Chrome there is also the Changes tab in the console drawer that displays all the modifications of CSS. It's not an export, but at least it is very convenient to quickly grasp what has changed.
I built a Chrome extension that does exactly this.
It's called StyleURL - it takes whatever CSS changes you made in Chrome Inspector and outputs valid CSS as the diff: https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp
Here's an example where I added "padding-bottom: 50px" to this page:
It's open-source and on GitHub too: https://github.com/Jarred-Sumner/styleurl-extension
Both Firefox and Chrome support this feature now, but worth to note that in some platforms if not all Chrome does not show it by default, you need to enable the "Changes" view to see it (in my Kubuntu Linux 20.04 it wasn't by default), here is how you can enable it: go to the "Customize and Control DevTools" button in the Developer Tools bar > "More tools" > "Changes", then the tab will appear at the button:
In Firefox there is no need to enable it, but if you come from the Chrom* world may be hard to find it. Just check the last section in the right at the "Inspector" tab:
I've suggested this product on SO before (I'm not affiliated with them in any way).
http://www.skybound.ca/
Excellent product. Sounds like exactly what you're looking for and much more.
EDIT: Several other answers here have mentioned Google Chrome's ability to link to your local files (which is very very cool). Check out the other answers!
If you edit external CSS, then you can drag its latest revision out of the Resources panel into any text editor that supports DnD (see http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/, the "Persisting Changes" section for more detail.) You can also revert your CSS changes to any earlier version of the stylesheet resource (in the right-click popup menu of any stylesheet revision.)
As mentioned by cloudworks, the answer to this has changed. This can now be accomplished rather well by the Chrome DevTools Autosave extension. This tool tracks CSS and JavaScript changes made within the Chrome Developer Tools console, and saves them back to local files. For instructions to install and setup the extension, please refer to the guide written by #addyosmani on his blog, here.
There is also a handy screencast which details the extension rather well.
With Workspaces you can have your CSS saved as you type them in your inspector (in Chrome). The problem is that every change is automatically saved and there's no way to disable this feature, as pointed in http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/ and Disable automatic saving of CSS changes in Chrome Developer Tools.
My in-beta-soon product LIVEditor does this exactly.
To let you understand it easily, you can think of Firebug's inspector is embedded into your text editor.
That way you don't have to make the changes manually again in your code editor after you tweaking it using Firebug or Webkit's developer tools.
If you're using the Firefox stock dev tools you can edit the css directly in the tools dialog - click the CSS viewport button (that's the button at the top with the {} symbol) and edit your css directly. It will update in realtime in the browser and when you're done just copy-paste it directly into your css file. Nice!
To add an answer for Safari specifically — it's kind of possible.
When you edit CSS in the Styles section in the Inspector for an existing CSS file, you can hit Cmd-S to re-save the entire file with the changes. However, if you're using a meta language like Sass / preprocessor / generating your CSS with bundling etc, I don't think this really solves that problem, though it may be possible with CSS source maps.
When you edit CSS at the top of the Styles section, under Style Attribute to add inline styles (not tied to an existing CSS file), it doesn't seem possible to easily export all of those changes. For now, I'm just copying and pasting the overrides manually for each element.
The official Apple docs are a little dated but found here: Web Inspector Tutorial - Editing Code to Change Your Webpage.
In Chrome, in the css inspector you can click and hold the + button, then choose to add your changes to the inspector-stylesheet. It's not as convenient as directly editing in your css-selectors, but what you write will all be in inspector-stylesheet.css