Dev Tools

Chrome DevTools is your primary weapon for client-side hacking. Here are the panels you need to know.

Console

• Execute javascript directly
• View console output (console.log, errors, warnings)
• Filter for specific log types
• Watch expressions
• Change javascript context if there are iframes (dropdown at top of console)

Elements

• View current state of HTML content of page
• Event Listeners tab shows event handlers
  • Registered postMessage listeners can be viewed under "message"

Sources

• Shows all resources loaded on the page (HTML, JS, CSS, images, etc.)
  • Also shows where they are loaded from — sometimes JS can be loaded from different sites
• Search all files: Right Click Top → Search All Files
• Set breakpoints by clicking on a line number

Break Points, Log Points, Conditional Breakpoints

var input = location.hash.slice(1);          // 🔵 Breakpoint
var decoded = decodeURIComponent(input);   // 🟪 Log Point
element.innerHTML = decoded;              // 🟠 Conditional

• ● Traditional breakpoints: halt execution on a particular line of code
• ● Log point: create a log statement in the console at a particular instruction (without pausing)
• ● Conditional breakpoint: halt execution if a certain condition is true

Debugging Operations

• Step over → Proceed to the next line of code
• Step into → Jump into a function on the current line of code
• Step out → Jump out of a function and back into the parent function
• Can use the console to edit variables and run expressions on the fly while paused

Minified JavaScript

var a=function(b){var c=b.split("&"),d={};for(var e=0;e<c.length;e++){var f=c[e].split("=");d[f[0]]=decodeURIComponent(f[1]||"")}return d},g=a(location.search.slice(1));document.getElementById("out").innerHTML=g.q;

• Many applications will have "minified" JS as an optimization + obfuscation mechanism
  • Sometimes sourcemaps are enabled, giving us the original source code
• Methodology stays the same, just have to deal with uglier javascript
• String literals and API names don't typically change with minifications, so using "Search All" is key
• Use the Pretty Print button { } in DevTools Sources to format minified code

Exercise: Breakpoint Debugging