1<!DOCTYPE html> 2<html lang="en"> 3 4<!-- 5 Python Tutor: Copyright (C) Philip Guo 6--> 7 8<head> 9 <meta charset="UTF-8"> 10 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 11 <title>Visualize Java Code - Java Visualizer, Tutor, and Debugger with AI Help</title> 12 13 <!-- SEO Meta Tags --> 14 <meta name="description" content="Java visualizer, visual debugger, and AI tutor - the only tool that lets you visually debug your Java code step-by-step (also debug Python, JavaScript, C, and C++ code)"> 15 <link rel="canonical" href="https://pythontutor.com/java.html"> 16 17 <!-- Open Graph / Social Media --> 18 <meta property="og:type" content="website"> 19 <meta property="og:url" content="https://pythontutor.com/java.html"> 20 <meta property="og:title" content="Java Visualizer, Visual Debugger, and AI Tutor"> 21 <meta property="og:description" content="Free online Java compiler and visual debugger. Step-by-step visualization with AI tutoring to learn object-oriented programming."> 22 <meta property="og:site_name" content="Python Tutor"> 23 <meta property="og:locale" content="en_US"> 24 <meta property="og:image" content="https://pythontutor.com/imgs/fruitlist-1.png"> 25 26 <!-- Twitter Card --> 27 <meta name="twitter:card" content="summary_large_image"> 28 <meta name="twitter:title" content="Java Visualizer, Visual Debugger, and AI Tutor"> 29 <meta name="twitter:description" content="Free online Java compiler and visual debugger. Step-by-step visualization with AI tutoring."> 30 <meta name="twitter:image" content="https://pythontutor.com/imgs/fruitlist-1.png"> 31 32 <!-- Google Fonts for redesigned template 33 34 Font URL format explanation: 35 - family=FontName:axes@values 36 - For Funnel Sans, we use two axes: ital (italic) and wght (weight) 37 - Format: ital,wght@{ital},{wght};{ital},{wght};... 38 - ital: 0 = normal (upright), 1 = italic 39 - wght: 400 = regular, 600 = semibold, 700 = bold 40 41 Current Funnel Sans values: 42 - 0,400 = normal weight 400 (regular text) 43 - 0,600 = normal weight 600 (semibold) 44 - 0,700 = normal weight 700 (bold, used by <strong> and <b>) 45 - 1,400 = italic weight 400 (used by <em> and <i>) 46 - 1,700 = italic weight 700 (bold italic, used by <strong><em>) 47 48 If italic variants are not loaded, the browser fakes italics by 49 slanting the regular font ("faux italic") which looks bad. 50 --> 51 <link rel="preconnect" href="https://fonts.googleapis.com"> 52 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 53 <!-- 2026-08-05: load Google Fonts WITHOUT blocking first paint. media="print" 54 makes the browser fetch this stylesheet at low priority without blocking 55 rendering, and onload flips it to media="all" so the fonts apply once 56 loaded; the <noscript> copy covers JS-off browsers. The font stacks in 57 styles.css have system-font fallbacks and display=swap is set, so text 58 renders immediately in fallback fonts and swaps when ready. This also 59 prevents multi-second blank-first-paint hangs in mainland China, where 60 fonts.googleapis.com is blocked (same non-blocking pattern the site 61 already uses for map-widget.css on the homepage). [written by Claude 62 Code on 2026-08-05, may be incorrect/outdated] --> 63 <link href="https://fonts.googleapis.com/css2?family=Funnel+Sans:ital,wght@0,400;0,600;0,700;1,400;1,700&family=JetBrains+Mono&family=Radio+Canada+Big:wght@500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'"> 64 <noscript><link href="https://fonts.googleapis.com/css2?family=Funnel+Sans:ital,wght@0,400;0,600;0,700;1,400;1,700&family=JetBrains+Mono&family=Radio+Canada+Big:wght@500;600;700&display=swap" rel="stylesheet"></noscript> 65 66 <!-- Redesigned template stylesheet --> 67 <link rel="stylesheet" href="css/styles.css"> 68 69<!-- CRITICAL: Set Java as default language BEFORE loading the bundle -->
70<script type="text/javascript"> 71window.optOverride = {} 72window.optOverride.frontendLang = 'java'; // hacky override before including visualize.bundle.js 73</script>
73 74 75 <!-- let Webpack take care of everything. Use the [hash] feature to 76 create unique filenames for releases: 77 https://webpack.github.io/docs/long-term-caching.html --> 78 <!-- 2026-08-05: defer lets the static HTML shell render while this big 79 bundle downloads in parallel; all entry-point code already waits for 80 $(document).ready, so execution behavior is unchanged. [written by 81 Claude Code on 2026-08-05, may be incorrect/outdated] --> 82
82<script type="text/javascript" src="build/visualize.bundle.js?5c1730ccc0" charset="utf-8" defer></script>
82 83 84<!-- insert google-analytics.txt contents here --> 85<!-- Google tag (gtag.js) -->
vendor: 64 bytes, lines 85-86
85 86<script async src="https://www.googletagmanager.com/gtag/js?id=
86G-ZQKWR5SQ3H
vendor: 12 bytes, line 86
86"></script>
87<script> 88
vendor: 134 bytes, lines 88-92
88window.dataLayer = window.dataLayer || []; 89 function gtag(){dataLayer.push(arguments);} 90 gtag('js', new Date()); 91 92 gtag('config', '
92G-ZQKWR5SQ3H
vendor: 4 bytes, line 92
92');
93</script>
93 94 95</head> 96 97<body> 98<!-- page--fit-content: makes header/footer expand to match wide content (see styles.css) --> 99<div class="page page--fit-content"> 100 101<!-- Navigation --> 102<!-- 2026-01-21: Disable sticky header on this page by overriding position:sticky from styles.css. 103 The inline style is used so other pages sharing styles.css can keep their sticky headers. --> 104<header class="nav" style="position: relative;"> 105 <div class="nav__left"> 106 <a href="index.html" class="nav__logo"> 107 <span class="nav__logo-text">Java Tutor</span> 108 </a> 109 <nav class="nav__languages" aria-label="Language tutors"> 110 <a href="python-compiler.html" class="nav__lang-link">Python Tutor</a> 111 <a href="c.html" class="nav__lang-link">C Tutor</a> 112 <a href="cpp.html" class="nav__lang-link">C++ Tutor</a> 113 <a href="javascript.html" class="nav__lang-link">JavaScript Tutor</a> 114 </nav> 115 </div> 116 <nav class="nav__right" aria-label="Main navigation"> 117 <a href="https://docs.google.com/forms/d/e/1FAIpQLSfvs94n1d3ZaXDgytT7JhXBafS8q12ucr9YNiZCBakCQ-w6LA/viewform?usp=dialog" class="nav__link">Teacher Mode</a> 118 <a href="https://docs.google.com/document/d/13_Bc-l2FKMgwPx4dZb0sv7eMfYMHhRVgBRShha8kgbU/" class="nav__link">Docs</a> 119 <a href="index.html#impact" class="nav__link">Impact</a> 120 <a href="https://docs.google.com/forms/d/e/1FAIpQLSeVehBoLGJhbB9GGSh5Bj8AWa0rF5NCMjLCtuA3rhaEJlsRlg/viewform?usp=sf_link" class="nav__link nav__link--donate">Donate</a> 121 </nav> 122 <button class="nav__hamburger" aria-label="Menu"> 123 <span class="nav__hamburger-bar"></span> 124 <span class="nav__hamburger-bar"></span> 125 <span class="nav__hamburger-bar"></span> 126 </button> 127</header> 128 129<!-- Mobile/Tablet Slide-out Menu --> 130<div class="nav-overlay" aria-hidden="true"></div> 131<aside class="nav-menu" aria-label="Mobile navigation" aria-hidden="true"> 132 <!-- Tablet: Close button only (top-right) --> 133 <button class="nav-menu__close nav-menu__close--tablet" aria-label="Close menu"> 134 <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"> 135 <path d="M1 1L14 14M14 1L1 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> 136 </svg> 137 </button> 138 139 <!-- Mobile: Header with logo + close button --> 140 <div class="nav-menu__header"> 141 <a href="index.html" class="nav__logo"> 142 <span class="nav__logo-text">Python Tutor</span> 143 </a> 144 <button class="nav-menu__close nav-menu__close--mobile" aria-label="Close menu"> 145 <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"> 146 <path d="M1 1L14 14M14 1L1 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> 147 </svg> 148 </button> 149 </div> 150 151 <!-- Mobile: Language tutor buttons --> 152 <div class="nav-menu__languages"> 153 <a href="java.html" class="nav-menu__lang-btn">Java Tutor</a> 154 <a href="c.html" class="nav-menu__lang-btn">C Tutor</a> 155 <a href="cpp.html" class="nav-menu__lang-btn">C++ Tutor</a> 156 <a href="javascript.html" class="nav-menu__lang-btn">JavaScript Tutor</a> 157 </div> 158 159 <!-- Mobile: Teal card with nav links --> 160 <div class="nav-menu__card"> 161 <nav class="nav-menu__card-links"> 162 <a href="https://docs.google.com/forms/d/e/1FAIpQLSfvs94n1d3ZaXDgytT7JhXBafS8q12ucr9YNiZCBakCQ-w6LA/viewform?usp=dialog" class="nav-menu__card-link">Teacher Mode</a> 163 <a href="https://docs.google.com/document/d/13_Bc-l2FKMgwPx4dZb0sv7eMfYMHhRVgBRShha8kgbU/" class="nav-menu__card-link">Docs</a> 164 <a href="index.html#impact" class="nav-menu__card-link">Impact</a> 165 <a href="https://docs.google.com/forms/d/e/1FAIpQLSeVehBoLGJhbB9GGSh5Bj8AWa0rF5NCMjLCtuA3rhaEJlsRlg/viewform?usp=sf_link" class="nav-menu__card-link nav-menu__card-link--donate">Donate</a> 166 </nav> 167 </div> 168 169 <!-- Tablet: Simple nav links (no card) --> 170 <nav class="nav-menu__links"> 171 <a href="https://docs.google.com/forms/d/e/1FAIpQLSfvs94n1d3ZaXDgytT7JhXBafS8q12ucr9YNiZCBakCQ-w6LA/viewform?usp=dialog" class="nav-menu__link">Teacher Mode</a> 172 <a href="https://docs.google.com/document/d/13_Bc-l2FKMgwPx4dZb0sv7eMfYMHhRVgBRShha8kgbU/" class="nav-menu__link">Docs</a> 173 <a href="index.html#impact" class="nav-menu__link">Impact</a> 174 <a href="https://docs.google.com/forms/d/e/1FAIpQLSeVehBoLGJhbB9GGSh5Bj8AWa0rF5NCMjLCtuA3rhaEJlsRlg/viewform?usp=sf_link" class="nav-menu__link nav-menu__link--donate">Donate</a> 175 </nav> 176</aside> 177 178<!-- Mini Hero Section --> 179<section class="mini-hero"> 180 <div class="mini-hero__content"> 181 <h1 class="mini-hero__title"><a href="articles/java-visualizer.html">Java visualizer</a>, visual debugger, and AI tutor</h1> 182 <p class="mini-hero__subtitle">The only tool that lets you visually debug your Java code step-by-step.</p> 183 </div> 184</section> 185 186<!-- Main content area --> 187<main> 188 189<!-- 2026-01-18: Wrapper div to scope CSS styles and prevent conflicts with external template --> 190<div class="pythontutor-app"> 191<div class="app-layout__main"> <!-- pyInputPane and pyOutputPane --> 192 193<div id="pyInputPane"> 194 195<div id="codeIsRunning">
195Please wait ... your code is running (up to 10 seconds)</div> 196<div id="aboveTheFoldWarningMsg"></div> 197 198<div id="codeInputWarnings">Write code in 199 200 <select id="pythonVersionSelector"> 201 <option value="java" selected>Java</option> 202 203 <option disabled>------</option> 204 <option value="311">Python 3.11</option> 205 <option value="c_gcc9.3.0">C (C17 + GNU extensions)</option> 206 <option value="cpp_g++9.3.0">C++ (C++20 + GNU extensions)</option> 207 <option value="js">JavaScript (ES6)</option> 208 </select> 209 210</div> 211 212<div id="codeInputPane"></div> <!-- populate with Ace code editor instance --> 213<div id="frontendErrorOutput"></div> 214<div id="surveyPane"></div> 215 216<p> 217<button id="executeBtn" class="bigBtn" type="button">Visualize Execution</button> 218</p> 219 220<div id="instructionsPane"></div> 221 222<div id="optionsPane"></div> 223 224<div id="exampleSnippets"></div> 225 226</div> <!-- end pyInputPane --> 227 228<div id="pyOutputPane"></div> 229 230</div> <!-- end app-layout__main --> 231 232</div><!-- end .pythontutor-app --> 233 234</main> 235 236<!-- Footer --> 237<footer class="footer"> 238 <div class="footer__content"> 239 <div class="footer__top"> 240 <h2 class="footer__title">Python Tutor</h2> 241 <div class="footer__donate"> 242 <span class="footer__donate-text">Keep this tool free for everyone!</span> 243 <a href="https://docs.google.com/forms/d/e/1FAIpQLSeVehBoLGJhbB9GGSh5Bj8AWa0rF5NCMjLCtuA3rhaEJlsRlg/viewform?usp=sf_link" class="footer__donate-btn">Donate</a> 244 </div> 245 </div> 246 <div class="footer__links"> 247 <div class="footer__col"> 248 <h3 class="footer__col-title">Languages</h3> 249 <ul class="footer__col-list"> 250 <li><a href="python-compiler.html">Python</a></li> 251 <li><a href="java.html">Java</a></li> 252 <li><a href="c.html">C</a> and <a href="cpp.html">C++</a></li> 253 <li><a href="javascript.html">JavaScript</a></li> 254 </ul> 255 </div> 256 <div class="footer__col"> 257 <h3 class="footer__col-title">About</h3> 258 <ul class="footer__col-list"> 259 <li><a href="https://docs.google.com/forms/d/e/1FAIpQLSfvs94n1d3ZaXDgytT7JhXBafS8q12ucr9YNiZCBakCQ-w6LA/viewform?usp=dialog">Teacher Mode</a></li> 260 <li><a href="https://docs.google.com/document/d/13_Bc-l2FKMgwPx4dZb0sv7eMfYMHhRVgBRShha8kgbU/">Docs</a></li> 261 <li><a href="index.html#impact">Impact</a></li> 262 </ul> 263 </div> 264 <!-- 265 <div class="footer__col"> 266 <h3 class="footer__col-title">Learn</h3> 267 <ul class="footer__col-list"> 268 <li><a href="#">Blog</a></li> 269 <li><a href="#">Articles</a></li> 270 <li><a href="#">Videos</a></li> 271 </ul> 272 </div> 273 --> 274 <div class="footer__col footer__col--wide"> 275 <h3 class="footer__col-title">Help</h3> 276 <ul class="footer__col-list"> 277 <li><a href="https://docs.google.com/document/d/13_Bc-l2FKMgwPx4dZb0sv7eMfYMHhRVgBRShha8kgbU/edit?tab=t.0#bookmark=id.15szxjmdeghv">Report a Bug</a></li> 278 <li><a href="https://docs.google.com/document/d/13_Bc-l2FKMgwPx4dZb0sv7eMfYMHhRVgBRShha8kgbU/edit?tab=t.0#bookmark=id.foejiogbhizj">Unsupported Features</a></li> 279 <li><a href="https://docs.google.com/document/d/13_Bc-l2FKMgwPx4dZb0sv7eMfYMHhRVgBRShha8kgbU/edit?tab=t.0#bookmark=id.zaiomiz3ejh9">Terms of Service</a></li> 280 <li><a href="https://docs.google.com/document/d/13_Bc-l2FKMgwPx4dZb0sv7eMfYMHhRVgBRShha8kgbU/edit?tab=t.0#bookmark=id.zaiomiz3ejh9">Privacy Policy</a></li> 281 </ul> 282 </div> 283 </div> 284 </div> 285</footer> 286 287</div><!-- end .page --> 288 289<!-- Slide-out navigation menu -->
290<script> 291 (function() { 292 var hamburger = document.querySelector('.nav__hamburger'); 293 var menu = document.querySelector('.nav-menu'); 294 var overlay = document.querySelector('.nav-overlay'); 295 var closeBtnTablet = document.querySelector('.nav-menu__close--tablet'); 296 297 // Check if we're on mobile (< 750px) 298 function isMobile() { 299 return window.innerWidth < 750; 300 } 301 302 function openMenu() { 303 // Show elements first (display: block/flex) 304 menu.classList.add('nav-menu--visible'); 305 overlay.classList.add('nav-overlay--visible'); 306 menu.setAttribute('aria-hidden', 'false'); 307 overlay.setAttribute('aria-hidden', 'false'); 308 309 // Trigger reflow to ensure transition works 310 menu.offsetHeight; 311 312 // Then animate in 313 menu.classList.add('nav-menu--open'); 314 overlay.classList.add('nav-overlay--active'); 315 document.body.classList.add('nav-menu-open'); 316 317 // On mobile, scroll menu to bottom (content is anchored to bottom) 318 if (isMobile()) { 319 menu.scrollTop = menu.scrollHeight; 320 } 321 322 // Focus management: on tablet focus close button, on mobile stay on hamburger 323 if (!isMobile() && closeBtnTablet) { 324 closeBtnTablet.focus(); 325 } 326 } 327 328 function closeMenu() { 329 // Animate out 330 menu.classList.remove('nav-menu--open'); 331 overlay.classList.remove('nav-overlay--active'); 332 document.body.classList.remove('nav-menu-open'); 333 menu.setAttribute('aria-hidden', 'true'); 334 overlay.setAttribute('aria-hidden', 'true'); 335 336 // After transition, hide elements 337 setTimeout(function() { 338 menu.classList.remove('nav-menu--visible'); 339 overlay.classList.remove('nav-overlay--visible'); 340 }, 300); // Match CSS transition duration 341 342 // Return focus to hamburger button 343 hamburger.focus(); 344 } 345 346 function toggleMenu() { 347 if (menu.classList.contains('nav-menu--open')) { 348 closeMenu(); 349 } else { 350 openMenu(); 351 } 352 } 353 354 // Hamburger: toggle on mobile, open-only on tablet 355 hamburger.addEventListener('click', function() { 356 if (isMobile()) { 357 toggleMenu(); 358 } else { 359 openMenu(); 360 } 361 }); 362 363 // Tablet close button 364 if (closeBtnTablet) { 365 closeBtnTablet.addEventListener('click', closeMenu); 366 } 367 368 // Overlay click (tablet only) 369 overlay.addEventListener('click', closeMenu); 370 371 // Close on Escape key 372 document.addEventListener('keydown', function(e) { 373 if (e.key === 'Escape' && menu.classList.contains('nav-menu--open')) { 374 closeMenu(); 375 } 376 }); 377 378 // Close menu when clicking any link 379 menu.querySelectorAll('.nav-menu__link, .nav-menu__lang-btn, .nav-menu__card-link').forEach(function(link) { 380 link.addEventListener('click', closeMenu); 381 }); 382 })(); 383</script>
383 384 385</body> 386</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.