From 1e2a702c1959d37db734d2ecfaee0e5035b2bfbb Mon Sep 17 00:00:00 2001 From: pdr Date: Wed, 6 Jul 2016 06:10:25 -0700 Subject: Update dev docs to reference the new skia debugger (skiaserve) This patch adds a new markdown file describing the new debugger along with instructions on running it locally and a sweet screenshot. The screenshot has been sized to not be clipped when viewed in production. The old documentation for the qt-based debugger has been marked as deprecated and all docs referencing the old debugger have been updated. BUG=skia:5493 GOLD_TRYBOT_URL= https://gold.skia.org/search?issue=2121673002 NOTRY=true DOCS_PREVIEW= https://skia.org/?cl=2121673002 Review-Url: https://codereview.chromium.org/2121673002 --- site/dev/tools/debugger.md | 119 +++++-------------------------------- site/dev/tools/onlinedebugger.png | Bin 0 -> 137298 bytes site/dev/tools/qtdebugger.md | 120 ++++++++++++++++++++++++++++++++++++++ site/user/quick/linux.md | 2 - site/user/tips.md | 6 +- 5 files changed, 135 insertions(+), 112 deletions(-) create mode 100644 site/dev/tools/onlinedebugger.png create mode 100644 site/dev/tools/qtdebugger.md (limited to 'site') diff --git a/site/dev/tools/debugger.md b/site/dev/tools/debugger.md index 2f79e34d31..cd0762594c 100644 --- a/site/dev/tools/debugger.md +++ b/site/dev/tools/debugger.md @@ -5,116 +5,25 @@ Introduction ------------ The Skia Debugger is a graphical tool used to step through and analyze the -contents of the Skia picture format. Pre-requisites include installing the Qt -Library and downloading the Skia code base. +contents of the Skia picture format. The tool is available online at +[https://debugger.skia.org](https://debugger.skia.org/) or can be run locally. -Qt is available here: http://qt-project.org/downloads. - -It can also be installed on linux using - - -~~~~ -sudo apt-get install libqt4-dev -~~~~ - -Note that the debugger has been tested with Qt 4.8.6; it is known not to work -with Qt 5.0RC1 on the Mac. - -Design Documents: - -https://docs.google.com/a/google.com/document/d/1b8muqVzfbJmYbno9nTv5721V2nlFMfnqXYLNHiSQ4ws/pub - - -How to build and run +Building and running locally -------------------- -Because the debugger uses Qt, you'll need to build skia in 64 bit mode: - - - - GYP_DEFINES="skia_arch_width=64" python bin/sync-and-gyp - ninja -C out/Debug debugger - out/Debug/debugger - -For Windows, Qt ships as 32 bit libraries so to build and run one should just be -able to: - - -~~~~ -cd trunk -make clean gyp - -~~~~ - -Depending on how your Qt is installed you may also need to define an environment -variable like: - -~~~~ -GYP_DEFINES=qt_sdk='C:\Qt\4.8.6\' -~~~~ -(which needs to be set before you execute 'make gyp') - -On Windows, you may need to copy several DLL and PDB files from %QTDIR%\bin into -your executable directory (out/Debug or out/Release): - -QtCore4.dll QtCored4.dll QtCored4.pdb - -QtGui4.dll QtGuid4.dll QtGuid4.pdb - -QtOpenGL4.dll QtOpenGLd4.dll QtOpenGLd4.pdb - - -Producing SKPs for usage ------------------------- - -You may either use the Skia testing images (GMs) for use in the debugger or -create your own via chromium. - -To create SKPs from Chromium you must download and build chromium on your -platform of choice: http://www.chromium.org/Home - - -~~~~ -cd src -make chrome -out/Debug/chrome --no-sandbox --enable-gpu-benchmarking --force-compositing-mode -~~~~ - -After which go to Tools, Settings, Javascript Console and type: - - -~~~~ -chrome.gpuBenchmarking.printToSkPicture(dirname) -~~~~ - -Using the Debugger ------------------- +Begin by following the instructions to +[download and build Skia](../../user/quick), then simply build and run the +`skiaserve` tool: -The debugger is fairly straight forward to use once a picture is loaded in. We -can step through different commands via the up and down keys, and clicking on -the command in the list. We can pause execution of commands with the pause -button in order to inspect the details of the command in the inspector tabs -down below. + - - Command | Function - -------------|----------------------------------------------- - x | toggles the visibility of the selected command - alt-x | clears all hidden commands - ctrl-x | shows all deleted commands - b | creates a breakpoint on a command - alt-b | clears all breakpoints - ctrl-b | shows all breakpoints - ctrl-r | rewinds the picture to the first command - ctrl-p | plays to the next breakpoint or last command - ctrl-i | Toggles the inspector and settings widgets - ctrl-d | Toggles the directory widget - space | Pauses drawing execution - ctrl-o | Opens a file dialog for loading pictures - ctrl-s | Saves the skp if you deleted any commands - ctrl-shift-s | Saves the skp under the new specified name - ctrl-q | Quits + # Build. + ninja -C out/Release/skiaserve -![Debugger interface](debugger.png) + # Run the debugger locally + out/Release/skiaserve +After running `skiaserve`, follow the instructions to open the debugger in your +local browser. By default the address will be `http://127.0.0.1:8888`. +![Debugger interface](onlinedebugger.png) diff --git a/site/dev/tools/onlinedebugger.png b/site/dev/tools/onlinedebugger.png new file mode 100644 index 0000000000..d8bfbf018c Binary files /dev/null and b/site/dev/tools/onlinedebugger.png differ diff --git a/site/dev/tools/qtdebugger.md b/site/dev/tools/qtdebugger.md new file mode 100644 index 0000000000..e3c5a1f5b7 --- /dev/null +++ b/site/dev/tools/qtdebugger.md @@ -0,0 +1,120 @@ +Skia Debugger (deprecated) +============= + +Introduction +------------ + +The Skia Debugger is a graphical tool used to step through and analyze the +contents of the Skia picture format. Pre-requisites include installing the Qt +Library and downloading the Skia code base. + +Qt is available here: http://qt-project.org/downloads. + +It can also be installed on linux using + + +~~~~ +sudo apt-get install libqt4-dev +~~~~ + +Note that the debugger has been tested with Qt 4.8.6; it is known not to work +with Qt 5.0RC1 on the Mac. + +Design Documents: + +https://docs.google.com/a/google.com/document/d/1b8muqVzfbJmYbno9nTv5721V2nlFMfnqXYLNHiSQ4ws/pub + + +How to build and run +-------------------- + +Because the debugger uses Qt, you'll need to build skia in 64 bit mode: + + + + GYP_DEFINES="skia_arch_width=64" python bin/sync-and-gyp + ninja -C out/Debug debugger + out/Debug/debugger + +For Windows, Qt ships as 32 bit libraries so to build and run one should just be +able to: + + +~~~~ +cd trunk +make clean gyp + +~~~~ + +Depending on how your Qt is installed you may also need to define an environment +variable like: + +~~~~ +GYP_DEFINES=qt_sdk='C:\Qt\4.8.6\' +~~~~ +(which needs to be set before you execute 'make gyp') + +On Windows, you may need to copy several DLL and PDB files from %QTDIR%\bin into +your executable directory (out/Debug or out/Release): + +QtCore4.dll QtCored4.dll QtCored4.pdb + +QtGui4.dll QtGuid4.dll QtGuid4.pdb + +QtOpenGL4.dll QtOpenGLd4.dll QtOpenGLd4.pdb + + +Producing SKPs for usage +------------------------ + +You may either use the Skia testing images (GMs) for use in the debugger or +create your own via chromium. + +To create SKPs from Chromium you must download and build chromium on your +platform of choice: http://www.chromium.org/Home + + +~~~~ +cd src +make chrome +out/Debug/chrome --no-sandbox --enable-gpu-benchmarking --force-compositing-mode +~~~~ + +After which go to Tools, Settings, Javascript Console and type: + + +~~~~ +chrome.gpuBenchmarking.printToSkPicture(dirname) +~~~~ + +Using the Debugger +------------------ + +The debugger is fairly straight forward to use once a picture is loaded in. We +can step through different commands via the up and down keys, and clicking on +the command in the list. We can pause execution of commands with the pause +button in order to inspect the details of the command in the inspector tabs +down below. + + + Command | Function + -------------|----------------------------------------------- + x | toggles the visibility of the selected command + alt-x | clears all hidden commands + ctrl-x | shows all deleted commands + b | creates a breakpoint on a command + alt-b | clears all breakpoints + ctrl-b | shows all breakpoints + ctrl-r | rewinds the picture to the first command + ctrl-p | plays to the next breakpoint or last command + ctrl-i | Toggles the inspector and settings widgets + ctrl-d | Toggles the directory widget + space | Pauses drawing execution + ctrl-o | Opens a file dialog for loading pictures + ctrl-s | Saves the skp if you deleted any commands + ctrl-shift-s | Saves the skp under the new specified name + ctrl-q | Quits + +![Debugger interface](debugger.png) + + diff --git a/site/user/quick/linux.md b/site/user/quick/linux.md index be723efbfd..9ecea3b488 100644 --- a/site/user/quick/linux.md +++ b/site/user/quick/linux.md @@ -65,8 +65,6 @@ Make sure the following have been installed: * GL, such as **freeglut3-dev** -* QT4, used by the [Skia Debugger](/dev/tools/debugger): **libqt4-dev** - Check out the source code ------------------------- diff --git a/site/user/tips.md b/site/user/tips.md index 197bd6411c..7e6bc8ae9f 100644 --- a/site/user/tips.md +++ b/site/user/tips.md @@ -103,15 +103,11 @@ Capture a `.skp` file on a web page in Chromium 3. Execute: `chrome.gpuBenchmarking.printToSkPicture('/tmp')` This returns "undefined" on success. -Open the resulting file in the Skia Debugger, rasterize it with `dm`, +Open the resulting file in the [Skia Debugger](/dev/tools/debugger), rasterize it with `dm`, or use Skia's `SampleApp` to view it: - bin/sync-and-gyp - ninja -C out/Release debugger dm SampleApp - out/Release/debugger /tmp/layer_0.skp & - out/Release/dm --src skp --skps /tmp/layer_0.skp -w /tmp \ --config 8888 gpu pdf --verbose ls -l /tmp/*/skp/layer_0.skp.* -- cgit v1.2.3