1 Skia Debugger 2 ============= 3 4 Introduction 5 ------------ 6 7 The Skia Debugger is a graphical tool used to step through and analyze the 8 contents of the Skia picture format. Pre-requisites include installing the Qt 9 Library and downloading the Skia code base. 10 11 Qt is available here: http://qt-project.org/downloads. 12 13 It can also be installed on linux using 14 15 <!--?prettify?--> 16 ~~~~ 17 sudo apt-get install libqt4-dev 18 ~~~~ 19 20 Note that the debugger has been tested with Qt 4.8.6; it is known not to work 21 with Qt 5.0RC1 on the Mac. 22 23 Design Documents: 24 25 https://docs.google.com/a/google.com/document/d/1b8muqVzfbJmYbno9nTv5721V2nlFMfnqXYLNHiSQ4ws/pub 26 27 28 How to build and run 29 -------------------- 30 31 Because the debugger uses Qt, you'll need to build skia in 64 bit mode: 32 33 <!--?prettify?--> 34 35 GYP_DEFINES="skia_arch_width=64" python bin/sync-and-gyp 36 ninja -C out/Debug debugger 37 out/Debug/debugger 38 39 For Windows, Qt ships as 32 bit libraries so to build and run one should just be 40 able to: 41 42 <!--?prettify?--> 43 ~~~~ 44 cd trunk 45 make clean gyp 46 <open solution in VS2010 and build everything> 47 ~~~~ 48 49 Depending on how your Qt is installed you may also need to define an environment 50 variable like: 51 52 ~~~~ 53 GYP_DEFINES=qt_sdk='C:\Qt\4.8.6\' 54 ~~~~ 55 (which needs to be set before you execute 'make gyp') 56 57 On Windows, you may need to copy several DLL and PDB files from %QTDIR%\bin into 58 your executable directory (out/Debug or out/Release): 59 60 QtCore4.dll QtCored4.dll QtCored4.pdb 61 62 QtGui4.dll QtGuid4.dll QtGuid4.pdb 63 64 QtOpenGL4.dll QtOpenGLd4.dll QtOpenGLd4.pdb 65 66 67 Producing SKPs for usage 68 ------------------------ 69 70 You may either use the Skia testing images (GMs) for use in the debugger or 71 create your own via chromium. 72 73 To create SKPs from Chromium you must download and build chromium on your 74 platform of choice: http://www.chromium.org/Home 75 76 <!--?prettify?--> 77 ~~~~ 78 cd src 79 make chrome 80 out/Debug/chrome --no-sandbox --enable-gpu-benchmarking --force-compositing-mode 81 ~~~~ 82 83 After which go to Tools, Settings, Javascript Console and type: 84 85 <!--?prettify?--> 86 ~~~~ 87 chrome.gpuBenchmarking.printToSkPicture(dirname) 88 ~~~~ 89 90 Using the Debugger 91 ------------------ 92 93 The debugger is fairly straight forward to use once a picture is loaded in. We 94 can step through different commands via the up and down keys, and clicking on 95 the command in the list. We can pause execution of commands with the pause 96 button in order to inspect the details of the command in the inspector tabs 97 down below. 98 99 100 Command | Function 101 -------------|----------------------------------------------- 102 x | toggles the visibility of the selected command 103 alt-x | clears all hidden commands 104 ctrl-x | shows all deleted commands 105 b | creates a breakpoint on a command 106 alt-b | clears all breakpoints 107 ctrl-b | shows all breakpoints 108 ctrl-r | rewinds the picture to the first command 109 ctrl-p | plays to the next breakpoint or last command 110 ctrl-i | Toggles the inspector and settings widgets 111 ctrl-d | Toggles the directory widget 112 space | Pauses drawing execution 113 ctrl-o | Opens a file dialog for loading pictures 114 ctrl-s | Saves the skp if you deleted any commands 115 ctrl-shift-s | Saves the skp under the new specified name 116 ctrl-q | Quits 117 118  119 120 121
