Google I/O 2013 - Chrome DevTools Revolutions 2013
Why Stack Overflow recommends it
Stack Overflow users link it as the main walkthrough of Chrome DevTools Workspaces and CPU profiling, especially when answering or asking about saving DevTools edits back to local files.
Recommended by 3 people across 3 different months, 2013 to 2017.
What it is
A 34-minute Google I/O 2013 session in which Chrome DevTools engineers Paul Irish and Pavel Feldman walk through new DevTools features. Topics include mobile emulation, remote debugging, canvas and WebGL profiling, Sass support, Workspaces for editing local files, and paint profiling for scrolling performance.
What people said
Recommends loislo · 2013-05 · Stack Overflow · on “Finding large processing time in JavaScript using Chrome DevTools”
The latest video about DevTools is here [this video] It covers different topics about DevTools and includes a section about CPU profile too. So, you need to record a cpu profile and look into it. Also you can use FlameChart view on it. You can click on an item in BottomUp or TopDown or even a FlameChart bar and see the function body in the Sources panel. If you sources are minified, as in the screenshot, then you can press a button in the status bar of Sources panel. It looks like two curly braces {}. Then DevTools will format the sources. and that action will affect all the links to the source file in all other places like Timeline, CPUProfile etc. As example in the first snapshot you saw a func
Recommends ahmed hamdy · 2013-11 · Stack Overflow · on “Tincr chrome extension won't save file changes”
i had the same problem with Tincr But you can change in your files (css/js) using DevTool and save your changes to source file by using workspaces you need just choose project or folder which contain your files this two videos explain workspaces: [LINK] [this video]
Recommends adam-asdf · 2017-02 · Stack Overflow · on “Newbie HTML5 & CSS3 issue with Locating some icons”
There's multiple ways I can think of to accomplish this. This works: <footer class="mainFooter"> <ul> <li style="float:left"><a href=" [LINK] " title="cowboydesign.com">Copyright © 2017 cowboyDesigns.com</a></li> <li style="float:right"><img class="chrome" src="images/icons/black-chrome-icon.png" alt=""></li> <li style="float:right"><img class="firefox" src="images/icons/black-firefox-icon.png" alt=""></li> <li style="float:right"><img class="safari" src="images/icons/black-safari-icon2.png" alt=""></li> </ul> </footer> It could use a little love with regards to vertical alignment, but it works. I wouldn't set links in navigation bars to display:inline because it makes them harder to click (
Cites opensas · 2013-06 · Stack Overflow · on “How to test google chrome workspaces on linux?”
I saw this two videos [LINK] [this video] and I wanted to try google workspaces on my linux desktop I followed these instructions: [LINK] And this detailed tutorial: [LINK] But the "File system folders in Sources Panel" won't show up I tried with "Chromium Version 25.0.1364.160 Ubuntu 13.04 (25.0.1364.160-0ubuntu3)" and also with "Chrome Version 29.0.1530.2 dev" (I installed this dev [LINK] version from [LINK] ) Anybody had any luck whith this?
Cites kwiat1990 · 2017-10 · Stack Overflow · on “DevTools Workspace not saving changes to Sass files”
I have watched Paul Irish's video [this video] of him making changes to CSS in DevTools, which were saved in his local Sass file too. To do that he set up a Workspace in Chrome then used Sass --watch flag with this path: style.scss:style.css . I have a little bit different file structure than him. I have multiple Sass subfiles, which I import to my main.sccs . Then Sass compiler watches for changes in this file and compiles it to main.css (with a sourcemap by default). So my file structure look like this: project's root |-- index.html |-- css |-- main.css |-- sass |-- main.scss |-- theme |-- _variables.scss |-- _components.scss |-- _sctructure.scss |-- _menu.scss And to compile Sass files I this