I am new to programming and the c9 IDE, but looking at the console using developer tools, it says that there is a syntax error and no element found constantly. I did not switch up any code other than the HTML files and one CSS file I wrote. How can I get the CSS to be read? And in the HTML files, it is linked (this all worked yesterday).
Related
I just started using Prepros to compile my SCSS files and I can't seem to figure out how to enable live editing of those files in Chrome Developer Tools.
I'm not really sure how this is supported nowadays, but I've found some examples showing this in action (such as this video) and I know it used to be an experimental feature in earlier versions of Chrome.
In Prepros, I have Source Map enabled and the map is showing up in my filesystem properly.
Chrome is also showing all the SCSS files correctly, but I can't save any changes to the file system (basically, whenever I change something, it only changes in the compiled main.css file).
As you can see here, there are no green dots next to the SCSS files:
...and when I try to edit and save them in the Sources panel, this shows up:
Here's my Prepros project structure (everything gets compiled into the main.css file):
Is there any way to set this up so that I could edit anything in DevTools and save it to the file system from there? I want to avoid copying code over to my text editor as much as possible.
Is it possible to see TypeScript source maps in console?
I'm using Firefox Developer Edition and the Console is showing the .js line-numbers. I have a single .js file, compiled from multiple TypeScript files.
Chrome and Safari are showing the TypeScript sources correctly.
I have been trying to deal with this problem. I found an answer that works for me and have detailed it in an answer here Firefox isnt showing typescript ts source maps in the debugger
Your problem looks similar. Fundamentally it seems because FF does not handle relative paths to the .map files which are specified in your compiled javascript.
Our team has installed the Markdown Mode extension in Visual Studio on our Windows PCs, and we're happy with that as an editor for Markdown files, but we need a way to generate a wiki from those files where we can click on links that cross-link the files of the wiki. I've been trying to find something, but haven't had any success getting something running.
I tried creating an empty web application and pasting in the html file from here http://dynalon.github.io/mdwiki/#!index.md and naming it index.html, and adding a couple of md files to the same directory that I set to always copy to the build directory, but I got 404-3 errors when it tried to access the .md file.
I see a couple of tools that look possibly good but need Python or Ruby installed, which isn't ideal: http://markdoc.org/quickstart or http://helloform.com/projects/commonplace/
I see this ASP.NET control for embedding a Markdown file into a page http://wikicontrol.codeplex.com/ but the control is for VS 2010 so clearly is not being actively maintained, plus to use it I'll need to build something to take the relative links and find the related .md files and load them up in MVC - sounds like a hassle to get working, and it will require me to put MVC in my docs project.
Is there something that is just designed so that I can put an html file or similar in a directory with a root .md file and have it just immediately act like a wiki and allow navigation between them?
We have decided to use MarkdownDeep NuGet package and a single MVC controller to handle this. The MVC controller looks at the requested path, uses it to figure out the location of the Markdown file, reads that file and renders it to HTML and returns the HTML.
With the release of Firefox 25 we saw a huge improvement in their development tools. SO much so that I'm rather excited to try them out over Firebug.
However I can't see how to turn on Sass debugging, which is currently working in Firebug. I've looked in all the settings that are offered within the development settings.
I'm hoping I'm wrong and it is currently supported.
With Firefox 29 the support for Sass and LESS files was introduced.
Taken from https://hacks.mozilla.org/2014/02/live-editing-sass-and-less-in-the-firefox-developer-tools/
You have to right-click in the Rules section and activate Show original sources option:
Now CSS rule links will show the location in the original file, and
clicking these links will take you to the source in the Style Editor.
From there you can go on to the Styles Editor and edit your Sass/LESS file. Functionality needs Source Maps enabled!
The best suitable way to debug Sass in Firefox seems to be FireSass.
https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/
Often times I use "edit css" functionality in web developer extension to edit my style sheets.
It's a great feature but it takes time to edit the css and copy it back to an editor to save it.
I am planning to use Compass for my next project and I am wondering how I can use "edit css" functionality with SASS/Compass.
There's no way to do this the way you're expecting.
The flow will have to work like the following ->
Write Compass/SCSS -> Refresh Page -> Edit CSS to get results -> Re-Edit SCSS with previous step and or copy/paste.
Because it compiles down, there's no solution I know of yet that hooks it back in to the SCSS layer.
I don't think it will be much different from what you're doing now..
Compass will precompile the stylesheet written with Sass/SCSS, it will be a regular stylesheet by the time it reaches the browser, so if you then use the "edit CSS" function of your browser toolbar it will work the same way as you do now only you will need to go back to the SASS/SCSS file and insert the changes into the right place (e.g. it could be in a nested rule or mixin or function, depending on how you've written the SASS/SCSS file) - then Compass can recompile the stylesheet
Codekit
Codekit is a great product for OSX that will allow you to edit your local files and as you hit save it will automatically inject the new compiled stylesheet into your browser without a page refresh, so it will at least save you that step. However, as of yet there is no Windows counterpart that I'm aware of.
I've used Codekit on a pretty large project recently where we were using SCSS and it was certainly helpful. Although sadly, like you, I'm used to the "Edit CSS" Web Developer Toolbar workflow, and I've yet to find an exact translation over into the SASS world.
Web Putty
One other option that has some potential (but some SERIOUS drawbacks) is a open source framework from Fog Creek called Web Putty. It was a service they offered that allowed you to live edit CSS in the browser, including SASS and SCSS flavored CSS, but they stopped the service and simply open sourced the software so getting it setup is entirely on you and requires quite some effort (THATs the drawback).
This is possible now with experimental support for Sass in the Chrome dev tools.
First enable the support for Sass:
Then make sure you're compiling to anything other than compressed and enable debug info in Sass. If you're compiling from the command line, pass the --debug-info flag, if you're using Compass, add this to your config.rb:
sass_options = { :debug_info => true }
Presto, you have access to the Sass source in the dev tools:
Clicking on the line number in the dev tools will allow you to edit and apply the local changes:
Personally, I prefer to use compass watch in conjunction with LiveReload and edit in my editor, but for those of you that like to edit in the browser, you can now edit the Sass files directly.
Don't forget to compile to compressed before deploying.