Chrome VM files duplicate javascript

Question

I have a problem developing a website. I am using chrome to debug javascript functions. On one of my pages I see the following:

screenshot of the problem

You can see that my own javascript file gets executed, search.js. There is a duplicate of this file, called VM1769. This file also executes the same code, so a search request is sent twice.

I searched around, and saw someone solve this problem by disabling cache (while DevTools is open), but this did not work for me. I tried another version of Chrome, the problem is still here.

Does anyone have a solution?

This article seems to give more info: http://stackoverflow.com/questions/17367560/chrome-development-tool-vm-file-from-javascript — Sanford Staab, Dec 02 '16 at 14:08

score 4 · Answer 1 · answered Feb 15 '18 at 22:18

4

I got the same issue and found out that i really included the same JavaScript-File twice. So its not logical for me that Chrome shows the second execution as a VM-Script but it ended to do that when i deleted the duplicate include.

answered Feb 15 '18 at 22:18

terraloader

311
2
10

This was the cause for me. I had used a `script` tag that inserted my client script twice. – BITWISE Mar 14 '23 at 21:22

score 0 · Answer 2 · answered Sep 12 '15 at 18:53

Hi I was getting this also and this was causing to have two duplicated chooses in my autocomplete text input. What I did was just to create a global flag to know whether the script file was already executed or not. I know this is not the solution but I just wanted to share this here since blocking the execution of the VM file has fixed my problem but I need to know yet how definitely to resolve this.

score 0 · Answer 3 · answered Feb 18 '22 at 14:17

I was experiencing this issue.

For me it was caused by webpack injecting a second instance of my javascript files for debugging.

Removing the last line (mode: "development") eradicated the duplicate script.

const webpack = require('webpack');

module.exports = {
    entry: {
        a: [./scripts/xxx.ts"],
        b: ["./scripts/yyy.ts"],
        c: ["././scripts/zzz.ts"]
    },
    output: {
        // runtime asset location
        path: __dirname + "/dist/js/bundles",
        filename: '[name].js',
        library: "$",
        libraryTarget: "umd"
    },
    plugins: [
        new webpack.CleanPlugin(),
    ],
    module: {
        rules: [
            { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/ },
        ],
    },
    resolve: {
        extensions: ['.ts'],
    },
    mode: "development"
};

score 0 · Answer 4 · edited Jan 31 '23 at 23:21

I had the same problem. In the template on my server I put my script tag inside of the main content container.

{% block content %}
    {% block js %}
        <script src='path/toJSFile.js'></script>
    {% endblock %}
{% endblock %}

Which means that after rendering my script was not at the bottom of the <body> tag but inside of div.container and for some reason after rendering I had two duplicated scripts instead of one. One in a div.container another at the bottom of the <body> tag. Second one was inserted automatically for some reason.

So after I moved script outside of the div.content container my script started behave as I expect. No duplicates, no double fetch requests.

{% block content %}
    ...
{% endblock %}

{% block js %}
    <script src='path/toJSFile.js'></script>
{% endblock %}

Though my answer represents a snippet from a django template this approach should work in other cases as well. My suggestion is: you definitely want to place your script in a proper place (head or body) not inside of any divs.

Chrome VM files duplicate javascript

4 Answers4