9

I want to raise this question again.

What was suggested in the answer to this question is to use old fashioned approach:

  1. Store css in public folder, and incude it via <link href=
  2. Add public folder to google chrome devtools workspace

Not a rocket science at all. Works, but two things I don't like with this approach:

  1. It's still not native and for production I will have to move files from public folder
  2. Each time you edit css, meteor notices changes and reloads application. Author of that answer ignored it.

Basically this result I want:

  • I start meteor project, open chrome developer tools
  • Each time I edit css in chrome developer tools it automatically changes in project.

enter image description here

Problems:

  • Meteor performs concatenation of all css files even with --debug flag on. But provides source maps.
  • Meteor will still reload after file changes, but fortunately for styles meteor performs soft injection, I would call it, so page will not really be reloaded. It's okay and not really a problem.

Because of 1st problem and this bug I can not get it work.

This feature is very important for me in terms of productivity.

I would offer a good bounty for some guru, who could give me a direction to solve this. Maybe you point me to some starting points to make a plugin for chrome, this also would be acceptable

Community
  • 1
  • 1
ZuzEL
  • 12,768
  • 8
  • 47
  • 68
  • I might have to read everything twice as it's not very clear, but as a first quick hint, did you consider using something like the Workspaces in Devtools [https://developer.chrome.com/devtools/docs/workspaces](https://developer.chrome.com/devtools/docs/workspaces) – Radu Chiriac Aug 16 '15 at 01:26
  • @RaduChiriac Sorry, edits to make my question clear would be appreciated. Yes, It was suggested in the answer to the old question. Workspace is what we have to use for sure. But it does not work with meteors concatenated css. – ZuzEL Aug 16 '15 at 01:39
  • Have you tried using browser-sync from npm? – Josh Beam Aug 16 '15 at 07:32
  • Possibley a solution for problem #2 https://github.com/NucleusIDE/meteor-live-update –  Aug 16 '15 at 08:09
  • @JoshBeam browser-sync is good, but it does not perform opposite - update css from chrome inspector to hard drive as I see. – ZuzEL Aug 16 '15 at 09:19

2 Answers2

1

The way I do it is pretty simple.

  1. Open your website

  2. Right click -> inspect element

  3. Click on Settings - (the wheel in the top right corner).

3.1. Select General tab and look for Sources label (around the bottom). There search for Enable CSS source maps and Auto-reload generated CSS. Check both. You can check all the features if you want.

  1. Select Workspace tab and add the project folder.

  2. Refresh devtools/browser and repeat everything to step 2.

  3. Now, open the Source panel (Elements - Network - Source). Navigate through your folder and find the css file.

  4. Right click on it and select Map to file system resouce. A window with few css files should appear (depends on your projects config).

7.1 Select the css file for your project. A popup asking you to restart devtools will appear. Click ok. Enjoy.

Stanimir Dimitrov
  • 1,872
  • 2
  • 20
  • 25
  • Are you sure you do this with `meteor`? – ZuzEL Aug 23 '15 at 19:21
  • It doesn't matter if it's meteor or not. All you need to do is point the path to your css/scss/less files. The browser will do the rest – Stanimir Dimitrov Aug 24 '15 at 12:07
  • I linked my question to the similar one and the answer was exactly the same as yours, but more specified for meteor. http://stackoverflow.com/a/22755210/2555999 I'm not aware of what google documentation says, the only reason is that it does not work for meteor. See my question. I said that meteor concatenates all css in one, chrome dev tools can not handle it. – ZuzEL Aug 24 '15 at 14:26
  • Of course this does not work as Meteor puts the (compiled or not) sources inside the .meteor folder during the build process, and the files that are loaded by the browser are just copies of the actual project source you work with. Changes would be lost. – Sander van den Akker Nov 19 '15 at 13:22
0

I haven't tested this with Meteor, but for Harpjs & static HTML files the Chrome LiveReload extension will inject changes in Chrome Dev to the actual file.

afang
  • 70
  • 10