Workflow setup:
OK, so forget this entirely... not sure if it is going anywhere.....
1. In Chrome go to chrome://flags
2. Find and enable Enable Developer Tools experiments
3. Restart chrome
4. Open devtools (F12) then open Options (shortcut is question mark)
5. You should now see a new section "Experiments", in there click "File system folders in Sources Panel"
6. Close Devtools
7. Press 12 again, then ?, then see new section "Workspaces"
8. Type in your current project folder as a workspace, ignore the mappings section
So instead... download tincr chrome extension. You do not need to install LiveReload for this, it does the same thing plus more (but only in chrome).
I've created a json manifest file for a project which we can copy for every project (need to do this for each project unfortunately at this stage). I will put it in codelib.
Tincr creates a new tab in chrome devtools. You go in there and select the project you are working on. Choose "configuration file" and point it to the root of your website, this will look for the tincr.json file in that folder.
Go into visual studio. Select tools > options > environment > documents. Tick Detect when file changes and Auto load changes.
The improvements in workflow are:
1. You can debug and edit js or css in chrome devtools. When you hit control-S in devtools, tincr saves to your file system in the place designated in the json config file. Visual studio then autoreloads the file when you focus onto Visual studio.
2. You can edit in Visual studio and when you save, tincr notices the file system change and for javascript auto reloads the page for (which probably needs to run through from the top) or for css, automatically goes into the DOM and adds and removes the stylesheet without a full refresh.
Other potential improvements are
- mapping views (can't really do this because it would involve finding their routes - could do individual mappings in the json or could generate this somehow)
- auto build in vs (looking into this...)
Links:
Remy Sharp on devtools:
http://remysharp.com/2012/12/21/my-workflow-never-having-to-leave-devtools/
http://remysharp.com/2013/05/16/my-workflow-v2-mobile-devtools-livereload/
http://remysharp.com/2013/07/18/my-workflow-v3-full-coding-stack/
Here is a visual studio extension to try that auto compiles, apparently speeds up compilation, and hooks into livereload
http://visualstudiogallery.msdn.microsoft.com/96dabaeb-05e1-4850-a5cc-a6cce79f17c1
LiveReload
Another similar chome extension:
Mobile web inspector - allows live console logging and element of mobile device inspecting via online tools
Chrome devtools shortcut keys and hints:
https://developers.google.com/chrome-developer-tools/docs/authoring-development-workflow
Leave a Comment
Comments