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
This commit is contained in:
pdr
Commit bot
parent
2dcb615c6f
commit
1e2a702c19
@ -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
|
||||
|
||||
<!--?prettify?-->
|
||||
~~~~
|
||||
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:
|
||||
Begin by following the instructions to
|
||||
[download and build Skia](../../user/quick), then simply build and run the
|
||||
`skiaserve` tool:
|
||||
|
||||
<!--?prettify?-->
|
||||
<!--?prettify lang=sh?-->
|
||||
|
||||
GYP_DEFINES="skia_arch_width=64" python bin/sync-and-gyp
|
||||
ninja -C out/Debug debugger
|
||||
out/Debug/debugger
|
||||
# Build.
|
||||
ninja -C out/Release/skiaserve
|
||||
|
||||
For Windows, Qt ships as 32 bit libraries so to build and run one should just be
|
||||
able to:
|
||||
|
||||
<!--?prettify?-->
|
||||
~~~~
|
||||
cd trunk
|
||||
make clean gyp
|
||||
<open solution in VS2010 and build everything>
|
||||
~~~~
|
||||
|
||||
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
|
||||
|
||||
<!--?prettify?-->
|
||||
~~~~
|
||||
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:
|
||||
|
||||
<!--?prettify?-->
|
||||
~~~~
|
||||
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
|
||||
|
||||
|
||||
# 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`.
|
||||
|
||||
|
||||
|
||||
BIN
site/dev/tools/onlinedebugger.png
Normal file
BIN
site/dev/tools/onlinedebugger.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
120
site/dev/tools/qtdebugger.md
Normal file
120
site/dev/tools/qtdebugger.md
Normal file
@ -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
|
||||
|
||||
<!--?prettify?-->
|
||||
~~~~
|
||||
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:
|
||||
|
||||
<!--?prettify?-->
|
||||
|
||||
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:
|
||||
|
||||
<!--?prettify?-->
|
||||
~~~~
|
||||
cd trunk
|
||||
make clean gyp
|
||||
<open solution in VS2010 and build everything>
|
||||
~~~~
|
||||
|
||||
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
|
||||
|
||||
<!--?prettify?-->
|
||||
~~~~
|
||||
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:
|
||||
|
||||
<!--?prettify?-->
|
||||
~~~~
|
||||
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
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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
|
||||
-------------------------
|
||||
|
||||
|
||||
@ -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:
|
||||
|
||||
<!--?prettify lang=sh?-->
|
||||
|
||||
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.*
|
||||
|
||||
Loading…
Reference in New Issue
Block a user