Witch of Git - web/blog/blob - posts/2018/debugging-the-deep-end.md

   1 ---
   2 title: "Debugging in the Deep End"
   3 date: 2018-04-17
   4 # tags: code
   5 author: Cassie Jones
   6 summary: "I discuss the approach I used to fix a bug in VCV Rack despite having never looked at the codebase before."
   7 ---
   8
   9 # The Problem
  10
  11 Last week I was working with [Aaron][] on a series of [VCV Rack plugin modules][VCVMicroTools], and we were trying to add our own custom graphics for them.
  12 VCV Rack uses SVG for its plugins, so Aaron had built a front face for one of our modules, but it wasn't properly aligned.
  13 I imported it into Affinity Designer and tried to fix it up, but when I exported my new version and loaded it, suddenly all of our modules had vanished.
  14 Since our module wasn't *supposed* to vanish, and I hadn't done anything *obviously* wrong, I decided that this must be a bug in VCV Rack.
  15 Over the next few hours, I diagnosed and managed to fix this bug, and by the magic of open source and some luck, the PRs got merged the next day.
  16 In particular, I managed to make this fix without having ever looked at any of this code before, and I'd like to share the process I followed to manage to do this.
  17
  18 [Aaron]: http://twitter.com/a2aarontothe2
  19 [VCVMicroTools]: https://github.com/a2aaron/VCVMicroTools
  20 <!-- Use these links? -->
  21 [VCV Issue]: https://github.com/VCVRack/Rack/issues/917
  22 [nanosvg PR]: https://github.com/memononen/nanosvg/pull/116
  23
  24 # Debugging the SVG
  25
  26 The first phase when fixing a bug is to reproduce the bug.
  27 Here, because the rendering worked fine with Aaron's SVG until I re-exported it, I suspected that some feature being used in Affinity's SVG export wasn't supported by the VCV Rack SVG renderer.
  28 To figure out which, I used the first technique: minimize your failing case.
  29
  30 First, I tried changing export settings, removing groups to flatten the SVG, doing everything I could to remove different features.
  31 As I went, I inspected the working and not working SVG side-by-side to see what the differences were.
  32 I didn't make much progress this way, so I started from the other direction, building up instead of tearing down.
  33 I saved a simple blank grey square, just a single element.
  34 When that didn't work, I figured it must have something to do with one of the attributes on the `<svg>` container element.
  35 For reference, a minimal SVG exported from Affinity might look something like:
  36
  37 ```svg
  38 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  39 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  40           "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  41 <svg width="100%" height="100%" viewBox="0 0 240 380" version="1.1"
  42      xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  43      xml:space="preserve" xmlns:serif="http://www.serif.com/"
  44      style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;
  45             stroke-miterlimit:1.41421;">
  46      <rect x="0" y="0" width="240" height="380" style="fill:rgb(235,235,235);"/>
  47 </svg>
  48 ```
  49
  50 So I looked through all the settings on that, I noticed that it was setting the width and height to `100%`, whereas the working one was setting it to explicit pixel numbers.
  51 I copied the width and height out of the working one into the not-working one… and that fixed it.
  52 That suggested a possible problem: If you used percentage dimensions on the `<svg>` element, it wouldn't correctly calculate the size of the object, and would simply make it 0 by 0.
  53 This was a good enough guess for me, so I set about trying to figure out how to fix that.
  54
  55 # Spelunking the Code
  56
  57 This brings us to the second phase of solving the bug: find a piece of code that's related to the bug, so you have a place to start.
  58 I suspected that I could find where the SVGs were loaded in VCV Rack and fix it to handle those percentages correctly.
  59 I didn't know exactly how I would handle them yet, I had to see what it was doing first.
  60 To find this, I took a simple approach: search the source code for the word "SVG" and see what I could find!
  61 I used [ripgrep][], a very good search tool, but you can use whatever tool you have available as long as it can search all the code at once.
  62 If your editor can jump to definitions in a project, searching for related words and then jumping from definition to definition can help you find the part of the code you're interested in very quickly; having good code navigation tools helps *a lot*.
  63
  64 [ripgrep]: https://github.com/BurntSushi/ripgrep
  65
  66 Using this, I found SVG widgets, followed their class hierarchy up to rendering components, and then eventually I found my way to a class calling functions from "nanosvg."
  67 Curious, I looked it up, and saw that it was a small SVG parser library, and that it produces a bunch of shape paths.
  68 In order to not have to resize all those paths (I assumed), I decided to try fixing the bug from inside nanosvg instead of inside VCV Rack.
  69 Knowing that it was a problem with dimensions, I searched the nanosvg code for the string `"width"`.
  70 The second result was a very promising looking function:
  71
  72 ```c hl_lines="6 7 8 9"
  73 static void nsvg__parseSVG(NSVGparser* p, const char** attr)
  74 {
  75         int i;
  76         for (i = 0; attr[i]; i += 2) {
  77                 if (!nsvg__parseAttr(p, attr[i], attr[i + 1])) {
  78                         if (strcmp(attr[i], "width") == 0) {
  79                                 p->image->width = nsvg__parseCoordinate(p, attr[i + 1], 0.0f, 0.0f);
  80                         } else if (strcmp(attr[i], "height") == 0) {
  81                                 p->image->height = nsvg__parseCoordinate(p, attr[i + 1], 0.0f, 0.0f);
  82 // …
  83 ```
  84
  85 # Writing a Fix
  86
  87 I'd located a likely location for the bug, so now I changed mode from code spelunking to trying to understand what the code did.
  88 Since this function looked so relevant, I first tried to figure out what `nsvg__parseSVG` was doing.
  89 A good tool for this was finding where it was used: it was getting called in one place, from `nsvg__startElement`, and seemed to be being called when an `<svg>` tag was found, to compute the context from the attributes… perfect.
  90 The parameter `const char** attr` suggested a list of attribute strings, and the usage `attr[i]` and `attr[i + 1]` suggested the SVG key/value pairs.
  91 Therefore, it seemed like
  92
  93 ```c
  94 if (strcmp(attr[i], "width") == 0)
  95     p->image->width = nsvg__parseCoordinate(p, attr[i + 1], 0.0f, 1.0f);
  96 ```
  97
  98 would parse the width coordinate value.
  99 In order to figure this out, we want to go look at `nsvg__parseCoordinate`.
 100
 101 ```c
 102 static float nsvg__parseCoordinate(NSVGparser* p, const char* str,
 103                                    float orig, float length)
 104 {
 105     NSVGcoordinate coord = nsvg__parseCoordinateRaw(str);
 106     return nsvg__convertToPixels(p, coord, orig, length);
 107 }
 108 ```
 109
 110 Following those definitions, `nsvg__parseCoordinateRaw` follows a few steps to get to unit parsing, but it seems largely straightforward parsing of the data, no fancy processing.
 111 The fact that we've got an issue in % suggests that `nsvg__convertToPixels` is doing something interesting.
 112 And indeed, looking at the code for that function, it made clear what the `length` argument did:
 113
 114 ```c hl_lines="7"
 115 static float nsvg__convertToPixels(NSVGparser* p, NSVGcoordinate c,
 116                                    float orig, float length)
 117 {
 118     NSVGattrib* attr = nsvg__getAttr(p);
 119     switch (c.units) {
 120         // …
 121         case NSVG_UNITS_PERCENT:    return orig + c.value / 100.0f * length;
 122         default:                    return c.value;
 123     }
 124     return c.value;
 125 }
 126 ```
 127
 128 It was used as the base value that the percentage should be relative to.
 129 Then, it becomes clear: `nsvg__parseCoordinate(p, attr[i + 1], 0.0f, 1.0f);` makes `100%` into `1px`
 130 So, now we know what exactly has gone wrong, how do we solve it?
 131 Since I didn't know what the percentages should be relative to, I started researching, looking at Mozilla references for how the percent should behave.
 132
 133 I didn't find an answer, but while I was researching, I ran into lots of examples that didn't specify dimensions at all.
 134 This made me suspicious: nanosvg handles most SVGs correctly, so it must have some code to handle this case.
 135 When you're fixing a bug, often the edge case that you're running into is similar to another edge case that's already handled, and you just need to make it cover your case as well.
 136 Since this must be related to the dimensions, and the dimension handling sets the `width` field while parsing the `<svg>` element, I went out searching for `->width` and `.width` in the code.
 137 I immediately found `nsvg__scaleToViewbox` which contains a promising looking block of code:
 138
 139 ```c hl_lines="1"
 140 if (p->viewWidth == 0) {
 141     if (p->image->width > 0) {
 142         p->viewWidth = p->image->width;
 143     } else {
 144         p->viewMinx = bounds[0];
 145         p->viewWidth = bounds[2] - bounds[0];
 146     }
 147 }
 148 ```
 149
 150 This looks like what we want!
 151 It will recalculate the width and height if they're set to 0, so we just need to make sure that our 100% sets it to 0 instead of 1.
 152 And to fix that, we can simply change:
 153
 154 ```diff
 155  if (strcmp(attr[i], "width") == 0) {
 156 -    p->image->width = nsvg__parseCoordinate(p, attr[i + 1], 0.0f, 1.0f);
 157 +    p->image->width = nsvg__parseCoordinate(p, attr[i + 1], 0.0f, 0.0f);
 158  } else if (strcmp(attr[i], "height") == 0) {
 159 -    p->image->height = nsvg__parseCoordinate(p, attr[i + 1], 0.0f, 1.0f);
 160 +    p->image->height = nsvg__parseCoordinate(p, attr[i + 1], 0.0f, 0.0f);
 161  } else if (strcmp(attr[i], "viewBox") == 0) {
 162 ```
 163
 164 And that's the whole fix!
 165
 166 # Conclusions
 167
 168 You can use these techniques the next time you have to jump into a large codebase that's unfamiliar.
 169 Finding a simple case that fails, making a hypothesis about why it fails, and then searching for terms related to that gives you a big head-start navigating the code.
 170 Being able to jump to definitions helps you build a mental map of a thin slice of the code.
 171 Even though Rack is about 11K lines of code, and nanosvg is almost 3K, in the process of fixing this bug I only *glanced at* a few hundred lines of code, and only tried to understand a few dozen of them.
 172 The next time you want to try to examine a new codebase, keep these tricks in mind.