DevTools for jQuery

DevTools for jQuery: free step-by-step lesson with examples, common mistakes, and interview tips — part of jQuery Tutorial on Toolliyo Academy.

8 min read Updated 8/23/2026

On this page

jQuery Tutorial · Lesson 10 of 100

DevTools for jQuery

Setup & DOM → Events Effects AJAX → Perf & Integrate → Ship & Projects

Setup & DOM · 1 — Select · ~6 min · Setup and Selectors

What is this?

Browser DevTools let you probe $("selector") live, inspect bound events, and watch network calls. Logging $.fn.jquery and collection .length confirms the library and match count.

Why should you care?

When QueryVerse “does nothing,” DevTools usually reveals empty collections or scripts that never ran.

See it live — copy this example

Examples include the jQuery 3.7 CDN. Paste into an HTML file or use Run Example to preview.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>QueryVerse</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 1.25rem; }
    .box { padding: .75rem; border: 1px solid #ccc; border-radius: 8px; margin: .5rem 0; }
    .muted { color: #666; }
    button { margin-right: .35rem; margin-top: .35rem; }
    input, select, textarea { margin: .25rem 0; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: .4rem .55rem; text-align: left; }
    .hidden { display: none; }
    .row-odd { background: #f7f7f7; }
    .active { font-weight: 700; }
    .toast { background: #111; color: #fff; padding: .5rem .75rem; border-radius: 6px; }
  </style>
</head>
<body>
  <button type="button" id="probe" data-qid="qv-42">Probe me</button>
  <pre id="log" class="box muted">Open console too.</pre>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  $('#probe').on('click', function () {
    var $btn = $(this);
    var lines = [
      'jquery=' + $.fn.jquery,
      'matches for button=' + $('button').length,
      'data-qid=' + $btn.data('qid'),
      'raw node=' + $btn.get(0).tagName
    ];
    $('#log').text(lines.join('\n'));
    console.log('QueryVerse probe', $btn.get(0));
  });
});
</script>
</body>
</html>

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>QueryVerse</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 1.25rem; }
    .box { padding: .75rem; border: 1px solid #ccc; border-radius: 8px; margin: .5rem 0; }
    .muted { color: #666; }
    button { margin-right: .35rem; margin-top: .35rem; }
    input, select, textarea { margin: .25rem 0; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: .4rem .55rem; text-align: left; }
    .hidden { display: none; }
    .row-odd { background: #f7f7f7; }
    .active { font-weight: 700; }
    .toast { background: #111; color: #fff; padding: .5rem .75rem; border-radius: 6px; }
  </style>
</head>
<body>
  <button type="button" id="probe" data-qid="qv-42">Probe me</button>
  <pre id="log" class="box muted">Open console too.</pre>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  $('#probe').on('click', function () {
    var $btn = $(this);
    var lines = [
      'jquery=' + $.fn.jquery,
      'matches for button=' + $('button').length,
      'data-qid=' + $btn.data('qid'),
      'raw node=' + $btn.get(0).tagName
    ];
    $('#log').text(lines.join('\n'));
    console.log('QueryVerse probe', $btn.get(0));
  });
});
</script>
</body>
</html>

Result