DEV Community: Min Yi

Debugging API JSON in the Browser: A Practical Workflow

Min Yi — Tue, 04 Aug 2026 01:50:02 +0000

When an API response looks wrong, the problem is often not the endpoint itself. A missing field, an unexpected string, or a content-type mismatch can be hidden inside a large JSON payload. A repeatable browser-based workflow makes these issues much easier to isolate.

1. Capture the exact response

Start in your browser's Network panel. Reload the page, select the request, and inspect three things:

the request URL and query parameters
the response status and response headers
the raw response body

Do not rely only on the rendered UI. A frontend may silently ignore fields it cannot parse, while the Network panel shows the data that actually crossed the wire.

Check the Content-Type header as well. A JSON response should normally use application/json. If the server returns HTML or plain text with a 200 status, the real problem may be a proxy, authentication redirect, or server-side error page.

2. Format the payload before reading it

Minified JSON is difficult to inspect and easy to misread. Format it first so nested objects and arrays become visible. Then look for:

fields that are present in one item but absent in another
numbers returned as strings
null values where the client expects an object
duplicate keys
arrays that are empty because a filter was applied upstream

A formatter is most useful when it preserves the original value types and clearly reports invalid syntax. If formatting fails, copy the smallest failing fragment into a validator instead of guessing where the error is.

3. Compare the schema with the client

Many “API bugs” are contract mismatches. Compare the actual response with the interface your code expects.

For example, the client may expect:

{
  "total": 3,
  "items": [
    { "id": 42, "name": "Ada" }
  ]
}

But the server may return total as a string:

{
  "total": "3",
  "items": [
    { "id": 42, "name": "Ada" }
  ]
}

That difference can break sorting, arithmetic, or runtime validation even though the JSON is syntactically valid. Document the expected shape with TypeScript types or a schema validator, then validate at the boundary where data enters your application.

4. Check encoding and escaping

If a value contains a URL, Base64 string, Unicode text, or user-generated content, inspect encoding separately from structure. Common symptoms include:

plus signs or slashes changing after a round trip
spaces appearing where percent-encoding was expected
Unicode characters becoming replacement symbols
a token being decoded twice

Test the smallest representative value in both directions. This is faster than debugging the entire response and helps identify whether the issue is in the API, transport, or client code.

5. Reduce the failing case

Once you find a suspicious field, create a minimal JSON example containing only the relevant structure. A reduced case helps you answer three questions:

Is the payload invalid JSON?
Is it valid JSON with the wrong type or shape?
Is the payload correct, but the application reading it incorrectly?

Keep the original response for reference, but use the reduced case in bug reports and tests. It makes the issue reproducible without exposing unrelated data.

6. A small browser toolkit can speed up the loop

You do not need a large local setup for every inspection task. A few focused browser utilities can help with formatting JSON, converting JSON to TypeScript, encoding URLs, testing regular expressions, and checking timestamps.

For example, Yaya Tools provides free browser-based utilities for these small jobs at yayatool.com. The useful part is not the branding; it is having quick, disposable tools available while you investigate a request. No installation or account is required.

7. Record the result

Finish by writing down the request, the observed response shape, the expected shape, and the fix. If the issue is a contract mismatch, update the API documentation or type definition so the same bug does not return later.

A good debugging workflow separates transport problems, syntax problems, schema problems, and application logic. Capture the raw response, format it, compare it with the expected contract, test encoding independently, and reduce the failure to a small reproducible example. That process turns a vague “the API is broken” report into a fixable technical issue.

Abstract Syntax Tree (AST) Deep Dive: From Theory to Practical Compiler Implementation

Min Yi — Tue, 29 Apr 2025 03:44:48 +0000

Introduction

In programming, parsing and transforming source code is a fundamental process. Whether it's syntax checking, formatting, or advanced operations like code minification and transpilation, a deep understanding of code structure is essential. At the heart of this process lies the Abstract Syntax Tree (AST)—a powerful tool for representing code in a structured, tree-like format.

This article will guide you through the core concepts of AST and demonstrate its practical application by building a mini-compiler from scratch. By the end, you’ll learn:

What is an AST? How does it represent code syntax?
How to implement a compiler step-by-step, from parsing source code to generating output.
Real-world applications of AST, including code transformation and syntax validation.

1. What is an AST?

An Abstract Syntax Tree (AST) is a tree representation of source code where each node corresponds to a syntactic unit (e.g., variables, functions, operators). Its primary role is to convert raw text-based code into structured data, enabling programmatic analysis and manipulation.

2. Building a Mini-Compiler

We’ll implement a compiler that transforms LISP-style function calls into C-style syntax:

LISP: (add 2 (subtract 4 2))  
C:    add(2, subtract(4, 2))

2.1. Compiler Workflow

Parsing:
- Lexical Analysis: Convert source code into tokens.
- Syntax Analysis: Convert tokens into an AST.
Transformation: Modify the AST (e.g., for language conversion).
Code Generation: Generate new code from the transformed AST.

2.2. Lexical Analysis (Tokenizer)

Convert source code into tokens:

function tokenizer(input) {
  let current = 0;
  let tokens = [];
  while (current < input.length) {
    let char = input[current];
    if (char === '(') tokens.push({ type: 'paren', value: '(' });
    else if (char === ')') tokens.push({ type: 'paren', value: ')' });
    else if (/\s/.test(char)) current++; // Skip whitespace
    else if (/[0-9]/.test(char)) {
      let value = '';
      while (/[0-9]/.test(char)) {
        value += char;
        char = input[++current];
      }
      tokens.push({ type: 'number', value });
    }
    else if (/[a-z]/i.test(char)) {
      let value = '';
      while (/[a-z]/i.test(char)) {
        value += char;
        char = input[++current];
      }
      tokens.push({ type: 'name', value });
    }
    else throw new TypeError(`Unknown character: ${char}`);
  }
  return tokens;
}

Output:

[
  { type: 'paren', value: '(' },
  { type: 'name', value: 'add' },
  { type: 'number', value: '2' },
  { type: 'paren', value: '(' },
  { type: 'name', value: 'subtract' },
  { type: 'number', value: '4' },
  { type: 'number', value: '2' },
  { type: 'paren', value: ')' },
  { type: 'paren', value: ')' },
]

2.3. Syntax Analysis (Parser)

Convert tokens into an AST:

function parser(tokens) {
  let current = 0;
  function walk() {
    let token = tokens[current];
    if (token.type === 'number') {
      current++;
      return { type: 'NumberLiteral', value: token.value };
    }
    if (token.type === 'paren' && token.value === '(') {
      token = tokens[++current];
      let node = { type: 'CallExpression', name: token.value, params: [] };
      token = tokens[++current];
      while (token.type !== 'paren' || token.value !== ')') {
        node.params.push(walk());
        token = tokens[current];
      }
      current++;
      return node;
    }
    throw new TypeError(`Unknown token: ${token.type}`);
  }
  let ast = { type: 'Program', body: [] };
  while (current < tokens.length) ast.body.push(walk());
  return ast;
}

AST Output:

{
  type: 'Program',
  body: [{
    type: 'CallExpression',
    name: 'add',
    params: [
      { type: 'NumberLiteral', value: '2' },
      {
        type: 'CallExpression',
        name: 'subtract',
        params: [
          { type: 'NumberLiteral', value: '4' },
          { type: 'NumberLiteral', value: '2' },
        ],
      },
    ],
  }],
}

2.4. Transformation

Modify the AST to match the target output structure:

function transformer(ast) {
  let newAst = { type: 'Program', body: [] };
  ast._context = newAst.body;
  traverser(ast, {
    NumberLiteral: {
      enter(node, parent) {
        parent._context.push({ type: 'NumberLiteral', value: node.value });
      },
    },
    CallExpression: {
      enter(node, parent) {
        let expression = {
          type: 'CallExpression',
          callee: { type: 'Identifier', name: node.name },
          arguments: [],
        };
        node._context = expression.arguments;
        if (parent.type !== 'CallExpression') {
          expression = {
            type: 'ExpressionStatement',
            expression: expression,
          };
        }
        parent._context.push(expression);
      },
    },
  });
  return newAst;
}

Transformed AST:

{
  type: 'Program',
  body: [{
    type: 'ExpressionStatement',
    expression: {
      type: 'CallExpression',
      callee: { type: 'Identifier', name: 'add' },
      arguments: [
        { type: 'NumberLiteral', value: '2' },
        {
          type: 'CallExpression',
          callee: { type: 'Identifier', name: 'subtract' },
          arguments: [
            { type: 'NumberLiteral', value: '4' },
            { type: 'NumberLiteral', value: '2' },
          ],
        },
      ],
    },
  }],
}

2.5. Code Generation

Convert the transformed AST into C-style code:

function codeGenerator(node) {
  switch (node.type) {
    case 'Program': return node.body.map(codeGenerator).join('\n');
    case 'ExpressionStatement': return `${codeGenerator(node.expression)};`;
    case 'CallExpression':
      return `${codeGenerator(node.callee)}(${node.arguments.map(codeGenerator).join(', ')})`;
    case 'Identifier': return node.name;
    case 'NumberLiteral': return node.value;
    default: throw new TypeError(`Unknown node type: ${node.type}`);
  }
}

Final Output:

add(2, subtract(4, 2));

3. Real-World Applications with Babel

Babel, a popular JavaScript compiler, uses AST for:

Transpiling modern JS (e.g., ES6+ → ES5).
Code optimization (e.g., dead code elimination).
Custom transformations (e.g., JSX → JS).

Example: Renaming a Function with Babel

const parser = require("@babel/parser");
const traverse = require("@babel/traverse");
const generator = require("@babel/generator");

const code = `const hello = () => {};`;
const ast = parser.parse(code);

traverse.default(ast, {
  Identifier(path) {
    if (path.node.name === "hello") path.node.name = "world";
  },
});

const result = generator.default(ast, {}, code);
console.log(result.code); // Output: const world = () => {};

Conclusion

ASTs are foundational to modern programming tools. By understanding them, you gain the ability to:

Build custom compilers/transpilers.
Analyze and refactor code programmatically.
Create domain-specific languages (DSLs).

For further reading, explore:

Original article: https://webfem.com/post/ast. Translated to English.