Vue-devtools: Message length exceeded maximum allowed length

Created on 15 Jan 2018 · 18Comments · Source: vuejs/vue-devtools

Version

4.0.0

Browser and OS info

Chrome 63

Steps to reproduce

Put a large amount of data in components and open Vue devtools.

What is expected?

Devtools open correctly.

What is actually happening?

vue-devtools
Error thrown: Message length exceeded maximum allowed length.
Could be similar to this.

bug

Source

w1ndy

👍9

Most helpful comment

Why is this closed as it is still an issue? Please re-open.

smitt04 on 19 Jan 2019

👍13 😕3

All 18 comments

A minimal repro:

<!DOCTYPE html>
<body>
    <div id="app"></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<script>
new Vue({
    el: '#app',
    mounted () {
        for (let i = 0; i < 10000000; i++)
            this.largeArray.push(i)
    },
    data: {
        largeArray: []
    }
})
</script>

w1ndy on 15 Jan 2018

👍1

vue-devtools completely freezes on this code, and the error will be thrown a moment later.

w1ndy on 15 Jan 2018

Please try this branch: https://github.com/Akryum/vue-devtools/tree/component-inspect-optimizations

Akryum on 19 Jan 2018

@Akryum Sorry for the late reply, but the patch merged did not resolve this issue... The latest vue-devtools is still throwing errors and violations on the example I gave earlier.

w1ndy on 7 Feb 2018

👍7

Is it possible to not serialize and transfer data entirely, but retrieve their values on demand?

w1ndy on 7 Feb 2018

I can confirm that I am also still seeing this issue.

colinfike on 7 Feb 2018

👍1

@colinfike I got the same issue in a PC environment , but it is OK in a MAC dev machine. Don't know why , same code , internet problem?

maverickchangithub on 16 Mar 2018

How much RAM do you have?

Akryum on 16 Mar 2018

I don't actually have the machine I was working on at the time but I believe I had 16gb with 8gb allocated to docker.

colinfike on 16 Mar 2018

@Akryum now i have the same issue on a Mac dev machine too . I use 2048M ram in both machine , php 7.2 . Really strange issue , maybe it is my code which broke the tool , not confirmed yet.

i am using a laravel imap parser to parse gmail , and i am using vue for the front end , there is lot of problems now , but it shows the data , only cannot use vue-dev-tools to monitor the properties

maverickchangithub on 19 Mar 2018

Seeing this problem also. @Akryum can we reopen this issue?

Does anybody know of a good work around?

davidkhess on 5 Jul 2018

👍1

Still seeing the issue here. I'm on Chrome 65. 16GB RAM of which 2.9 available.

landart on 30 Jul 2018

Same problem here with a base64 (almost 100Ko) image in vue data. In my case, maybe a big data content should be truncated in data preview... But for an array, I've no idea.

lalmat on 6 Aug 2018

👍2

About the only workaround I've been able to come up with is to select the Vue component I need to inspect, wait for the error to pop up and then switch the display to Events.

At least that way I can inspect the Vue using $vm0 in the console.

davidkhess on 12 Sep 2018

I still seeing the issue too. Chrome 70, 16GB RAM, VueDevtools 4.1.5 beta