How to Check for Broken JavaScript File Links on Web Pages

[DancingBird]

I’m working on a website that loads multiple JavaScript files and I need to verify they’re all loading correctly. Here’s what my HTML looks like:

<script type="text/javascript" src="/assets/main.js"></script>
<script type="text/javascript" src="/assets/utils.js"></script>
<script type="text/javascript" src="/assets/helper.js"></script>
<script type="text/javascript" src="/assets/config.js"></script>
<script type="text/javascript" src="/assets/library.js"></script>

I want to find out if any of these JavaScript files are returning 404 errors or failing to load properly. Going through each file manually would take too much time. Does anyone know of a good method or tool that can automatically scan a webpage and identify which script files are missing or broken? I’m looking for something that can check all the includes at once rather than testing them one by one.

[Luke_Brilliant]

yup, just press F12 for the dev tools and check the console. it quickly shows any js files with 404 errors. way easier than testing each file individually. just refresh your page and you’ll see all the issues!

[Mandy_45Photography]

chrome’s Lighthouse audit catches these too. right click > inspect > Lighthouse tab, then run a performance audit. it’ll flag all failed resource loads, including broken js files. really handy since it shows how they’re affecting your page speed.

[benmoore]

The Network tab in DevTools works great for this too. Just open DevTools, hit the Network tab, and reload your page. Failed JS requests show up in red with error codes like 404. You can filter by JS files to see only scripts. This gives you way more detail than the console - response times, exact error codes, the whole deal. I use this all the time for CDN problems or when scripts break for weird reasons beyond basic 404s. Plus the loading waterfall shows you exactly where your script loading bogs down.

[mythicMuse]

The Problem:

You’re loading multiple JavaScript files into your website and need a reliable way to check if they’re all loading correctly, without manually testing each one. You want a solution that can scan your webpage and identify any missing or broken script files, ideally handling all included scripts simultaneously.

Step-by-Step Guide:

1. Automate JavaScript File Loading Checks: The most efficient solution is to create an automated system that periodically checks your website’s JavaScript files. This eliminates the need for manual checks. Building such a system involves several steps:

   • Website Crawling: Develop a script (using tools like Python’s BeautifulSoup and requests libraries, or Node.js with libraries like cheerio and axios) that crawls your web pages and extracts all <script> tags and their associated src attributes.
   • URL Verification: For each extracted src attribute, construct the full URL and use the script to perform an HTTP HEAD request (or GET if HEAD isn’t supported). This checks for the existence of the file and its HTTP status code (e.g., 200 OK, 404 Not Found).
   • Report Generation: Aggregate the results into a report indicating which files failed to load (e.g., returning a 404 error) and any related details. You can use tools or libraries to conveniently format the report (e.g., CSV, JSON, or a custom HTML page).
   • Scheduled Execution: Schedule the script to run periodically (e.g., using cron jobs on Linux/macOS or Task Scheduler on Windows). This ensures continuous monitoring of your JavaScript files.
   • Alerting (Optional): Integrate email or other notification systems to alert you when errors are detected. This allows for quicker response times when issues arise.

2. Alternative: Utilize Existing Tools: If building a custom solution isn’t feasible, several alternatives exist:

   • Browser Developer Tools (Network Tab): Open your browser’s developer tools (usually by pressing F12), go to the “Network” tab, reload your page, and filter by “JS”. Failed requests are typically highlighted in red, showing the error code (e.g., 404) and other relevant details. This is a quick manual check, but not suitable for large-scale automated monitoring.
   • Browser Extensions: Extensions like “Link Checker” or “Dead Link Checker” can scan web pages for broken links, including JavaScript files. These are often easier than manually inspecting the Network tab but lack the automation capabilities of a custom script.

Common Pitfalls & What to Check Next:

• Caching: Ensure your browser or CDN cache isn’t interfering with your tests. Use the browser’s developer tools to clear the cache and disable caching before running checks.
• Relative Paths: Double-check that all your JavaScript file paths (src attributes) are correct relative to the HTML file’s location. Incorrect paths can lead to 404 errors.
• Server-Side Errors: If your scripts fail to load even after checking paths and caching, there might be server-side issues (e.g., file permissions, server configuration). Check your server logs for any errors related to JavaScript file requests.
• Deployment Errors: If you’re using a deployment pipeline, verify that the JavaScript files are correctly uploaded and deployed to the server.

Still running into issues? Share your (sanitized) config files, the exact command you ran, and any other relevant details. The community is here to help!

[Tom_89Paint]

Try browser extensions like Link Checker or Dead Link Checker. They’ll scan your whole page and flag broken JavaScript files automatically. I use these all the time for sites with conditional loading or dynamic content that doesn’t show up right away in DevTools. They’re way better than clicking through tabs manually or writing custom scripts. Some even let you export reports for documentation. Perfect for a quick check before pushing updates live.