Member Avatar for jewboy

Hello,

I am trying to view the source code of a navigation bar which is an include file on a site. Right clicking, and view source is not helping. Help?


Avi

  • 3 Contributors
  • 2 Replies
  • 131 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by Corey Bryant

Dani AI

Generated

Short answer: use your browser devtools to find the rendered nav (and any network requests that created it), and accept that you cannot read server-side include files from the client. and were on the right track — below is a compact, practical checklist that walks through modern techniques and what you can and cannot recover.

Start by inspecting the live DOM. Right‑click the visible nav and choose Inspect (Elements panel). Use the Elements search (Ctrl/Cmd+F) for common selectors like nav, #nav, navbar, or the site’s class names. To copy the rendered HTML from the page you can use the console:

document.querySelector('nav')?.outerHTML

If the nav is injected by client code, the Network and Sources panels will show how. Reload with DevTools open, filter Network by XHR/Fetch or Scripts, and look for requests returning HTML fragments or JS files that build the menu. Open the script in Sources, use Pretty Print if it’s minified, and search for template strings, innerHTML, or DOM-creation code. From the console you can also grab the final DOM snapshot with document.querySelector('nav').outerHTML and paste it into a local test file to experiment.

If the nav lives inside a frame/iframe, inspect that frame (open frame in new tab or choose the frame from DevTools’ top-left context). If a framework builds it (React/Vue/Angular), use the matching browser extension (React DevTools, Vue Devtools) to see component structure and props. If it’s produced by server-side code (SSI/PHP/ASP), the server’s source files are not exposed to visitors; only the rendered HTML is available. Reconstructing the markup for learning is fine, but do not copy licensed assets or reuse someone else’s work without permission.

For background on using DevTools see Chrome DevTools or MDN — Browser developer tools.

Recommended Answers

All 2 Replies

Member Avatar for tgreer

It's probably loaded as an external JavaScript. Viewing the source should show you all of the script tags. You can then navigate directly to the script file. I don't recommend this except for educational purpose, to learn how a certain effect is achieved. You should only download and use scripts that have been made available by their author(s) for sharing.

Member Avatar for Corey Bryant

It all depends on how it is being including. If it is SSI, ASP, or PHP, you are looking at the source code more than likely. If it is using frames, you will need to view the source of that page. And as tgreer pointed out, if it is JavaScript, you will need to download that JS file

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.