Vue: 경고 메시지 정보 개선

이 제출된 문제에는 추가 정보가 필요합니다. vue 2 또는 vue 1을 사용하고 있습니까?
버그입니까 아니면 제안입니까? 버그인 경우 jsfiddle에서 재현 가능한 링크입니다.
구성 요소에 핸들러 기능이 없는 경우 이는 vue 문제가 될 수 없습니다.

//최상의

Vue 2를 사용하고 있습니다. 버그가 아닙니다. 아무 소용이 없는 오류 메시지입니다. 글쎄요, Vue는 이것을 오류 메시지 스타일을 개선하고 구체적으로 만들기 위한 제안으로 받아들일 수 있습니다. 따라서 개발자가 실수를 하더라도 오류가 있는 위치를 정확히 파악하여 짧은 시간에 수정할 수 있습니다. React JS와 비교하여 구성 요소 이름을 줄 번호와 함께 표시하고 물론 오류도 표시합니다.

내가 원하는 것은 오류 메시지가 구체적으로 표시되기를 바랍니다.

Vue에는 실제로 많은 것을 말하지 않는 메시지가 많이 있습니다. 불행히도 Vue의 안전 점검이 부족한 것 같습니다.

vue가 경고에 좀 더 많은 정보를 추가할 수 있다면 -

구성 요소 이름
구성 요소 유형
또는
개발 환경에 대해 경고 메시지를 구성할 수 있습니다.

우리는 우리가 할 수 있을 때마다 구성 요소 정보를 제공하려고 노력합니다. 이것은 아마도 실수일 수 있습니다.

@just-nobody 우리가 개선할 수 있도록 어떤 메시지가 부족한지 구체적인 예를 제공해주십시오. 불평하는 것만으로는 아무 효과가 없습니다.

나는 정말로 불평하지 않았다. 사람들이 이미 알고 있는 내용인 줄 알았습니다. 나는 과거에 실제 문제에 대한 이상하고 설명이 필요 없는 메시지를 주었지만 대신 소스에 깊이 뿌리를 둔 작은 엣지 케이스를 많이 만났습니다. 다른 문제는 오류를 발생시키지 않고 대신 이상한 렌더링을 일으켰습니다. 벌레. 일부는 다른 것보다 추적하기 쉽기 때문에 내가 바보인 줄 알았기 때문에 신고하는 데 신경 쓰지 않았지만, 특히 하나는 무엇이 잘못되었는지 파악하는 데 너무 오래 걸리기 때문에 실제로 풀 리퀘스트를 생성했습니다. .

2.0.1이 나온 지금 많은 부분이 수정되었다고 생각합니다. 독자에게 보내는 메시지: 버그라고 생각되면 버그가 아닐지라도 보고하십시오.

@yyx990803 역시 , 컴포넌트의 이름 키를 제공하는 것은 별로 도움이 되지 않습니다. 잠시 들러 이 문제를 개선 사항으로 추가해 주셔서 감사합니다.

:) 감사합니다 에반

안녕하세요, 최근에 줄 번호가 부족하면 특히 구성 요소가 큰 경우 디버깅하기가 정말 어렵다는 사실을 알게 되었습니다. 수천 줄의 구성 요소가 있습니다. 경고를 받았습니다
"[Vue 경고]: 렌더링 기능 오류: "TypeError: _vm.values[item.name]이(가) 정의되지 않았습니다""

구성 요소 이름은 있지만 Firefox 콘솔에 줄 번호가 없습니다. 이러한 종류의 경우 지정된 줄 번호를 갖는 것이 정말 유용합니다. 물론 구성 요소를 여러 개의 작은 구성 요소로 분할하거나 편집기의 검색으로 이러한 모든 줄을 파헤칠 수 있지만 그게 요점이 아닙니다.

다음 버전에서 줄 번호를 추가하는 것을 고려하십시오. 감사합니다.

+1 줄 번호를 추가하십시오.

다음 메시지를 받았는데,

vue.js:577 [Vue 경고]: 렌더링 오류: "TypeError: 정의되지 않은 '길이' 속성을 읽을 수 없습니다"
(에서 발견)

변수 == null인 경우 이 구성에서 " variable.length"가 실패하는 이유를 알고 있습니다. 문제는 많은 ".length" 구조가 있고 데이터가 외부 서비스에서 온다는 것입니다.

나도 마찬가지야 @ameoba32
"정의되지 않은 '길이' 속성을 읽을 수 없습니다"가 있는데 문제가 있는 곳을 찾지 못했습니다. 그것은 큰 웹 앱이므로 어렵습니다.
원인에서 파일을 찾았지만 오류가 정확히 어디에 있는지 모르겠습니다.
끊어진 줄을 찾기 위해 한 줄씩 지워야 합니까? xD

@ameoba32 와 동일합니다. @yyx990803 뭐라도 해주세요. 감사 해요!

저는 vue를 많이 사랑하고 2년 동안 함께 일했습니다. RENDER 오류의 특이성 부족은 나의 #1 불만 사항/수정 요청입니다. 이 오류는 템플릿 또는 해당 js 코드에서 발생합니다. 줄 번호가 큰 도움이 되거나 문제가 템플릿이나 js 코드에 있는 경우에도 도움이 됩니다.

같은 문제가 있었다

예. 나는 같은 문제를 가지고있다 ;)

unreachable code after return statement[Więcej informacji] app.js:5248:4
unreachable code after return statement[Więcej informacji] app.js line 4957 > eval:5248:4
unreachable code after return statement[Więcej informacji] app.js:5248:4
unreachable code after return statement[Więcej informacji] app.js line 5136 > eval:5248:4

의미는 이해하지만 어디에서 수정해야 하는지 모르겠고 모든 구성 요소를 살펴보고 이러한 문제를 찾는 것은 많은 작업입니다.

여기도 마찬가지입니다.

vue.common.js는 오류가 발생한 위치를 찾으려고 할 때 아무 의미가 없습니다.

동의합니다. 소스 파일의 줄 번호만으로도 디버깅 속도가 훨씬 빨라집니다.

이것에 대해 새로운 것이 있습니까? 문제가 종료된 이유는 무엇입니까(문제가 여전히 존재하기 때문에)?

이 문제가 해결되었으면 합니다! 지금은 디버깅이 너무 복잡합니다. 디버깅을 쉽게 하려면 파일 이름과 줄 번호가 필요합니다. 수정하십시오.

저도 동의합니다. .vv 파일이 너무 커서 정확한 위치를 파악하는 것이 도움이 될 것입니다.

나는 어떤 구성 요소를 결정하고 오류에 대한 줄 번호(많은 경우)를 얻을 수 있는지 결정하는 데 약간의 진전을 이뤘습니다. (저는 단일 파일 구성 요소를 사용하고 있습니다). 하지만 아직 조사해야 할 부분이 많다. 앞으로 내 연구 결과를 발표할 수 있기를 바랍니다.

@gpadilla123 갓스피드님. 귀하의 작업을 기대합니다.

어떤 사람들이 잘못된 형식의 return 문에 대해 코드를 계속 조합하고 있는 경우 템플릿에서 표현식과 함수 호출을 모두 사용할 때 발생하는 오류의 원인을 찾았습니다.
:class="x=0; getClass()" 이 경우 x=0; 를 제거하면 경고가 제거됩니다. 이 목록에 있는 모든 사람에게 반드시 해당되는 것은 아니지만 템플릿을 확인하라는 알림입니다.

오늘날까지도 여전히 공으로 불분명합니다. vue가 변경하지도 않은 무언가를 평가할 때 오류가 발생합니다...

Vue 3.0은 더 나은 오류 메시지가 있기 때문에 이 문제를 해결해야 하지만 Vue 3.0의 출시 날짜는 2019년 2분기 말에서 2019년 말까지입니다. 기다리기에는 너무 길어서 라인을 얻는 방법을 해킹했습니다. 오류 수(일부 경우). 해킹된 솔루션은 더 강력하고 더 많은 경우에 작동해야 합니다.

예, 이것은 나를 죽이고 있습니다. 적어도 줄 번호 또는 더 나은 지정을 기대했습니다.

+1

이것은 치명적입니다. 오류가 발생하고 있는 줄이 올바르게 보고되어야 합니다. 현재 오류가 발생하면 완전히 쓸모없는 vue.js 줄 번호를 얻는 것 같습니다.

[Vue 경고]: 렌더링 오류: "TypeError: 정의되지 않은 속성 '0'을 읽을 수 없습니다."

[Vue warn]: Error in render: "TypeError: Cannot read property 'length' of undefined"
라인을 찾는 재미가 있을 것입니다. 특히 내 코드에 .length 가 많이 있는 경우.

이러한 메시지는 기러기 쫓는 것과 같습니다. 오류가 발생한 위치에 대한 단서 없음: 행 번호, vue 이름, 내가 만든 함수 이름이 예상됩니다. 이는 Vue 프레임워크의 일부가 아닙니다. 이것은 vue 2.5.17에서 발생합니다. 이와 같은 경우에도 vue 개발 확장의 도움이 없습니다.

Vue 3.0에서 이 문제가 해결될 것이라는 소식을 듣게 되어 기쁩니다. 그 동안 좋은 팁을 찾았습니다. 콘솔에서 오류 줄 표시기를 클릭한 다음 Vue 소스의 같은 줄에 중단점을 두십시오. 그런 다음 페이지를 다시 로드하면 디버거가 중단점에서 중지된 다음 구성 요소 중 하나를 찾을 때까지 스택을 백업할 수 있으며 일반적으로 오류가 있습니다.

완벽하지는 않지만 버그 사냥에서 빠져나오는 데 도움이 될 수 있습니다.

[Vue warn]: Error in render: "TypeError: Cannot read property 'length' of undefined"
라인을 찾는 재미가 있을 것입니다. 특히 내 코드에 .length 가 많이 있는 경우.

드디어 라인을 찾았습니다.
문제가 해결되었다면 그렇게 오래 걸리지 않았을 것입니다.

+1, vue의 콘솔 로깅이 많이 부족합니다. 예를 들어 아래를 가져 가라. 그것은 나에게 구성 요소 스택을 알려주고 있습니다. 이것은 훌륭하지만 여기에 줄 번호에 대한 참조가 없으며 전체 호출 스택은 내 구성 요소 코드가 아니라 vue 코드를 컴파일하도록 가리킵니다. 구성 요소 이름 옆에 있는 줄 번호만 있으면 됩니다.

또한 줄 번호 없이 디버깅하는 데 문제가 있습니다...

도전이 수락되었습니다.

이것은 수년 동안 실패했고 여전히 그렇습니다.

나는 누군가가 이미 이것에 대한 슈퍼 비밀 해킹이나 일부 업데이트를 가지고 있기를 희망하면서 이것을 스크롤하고있었습니다.

+1

TypeError: Cannot read property 'length' of undefined

하지만 난 30-50

우리는 렌더링 오류에 라인 번호가 정말 필요합니다.

해결 방법이 있습니까?

확인할 수 있습니다. 저는 여기에서 제 코드를 쳐다보기만 하고 있습니다. 왜 실패하는지에 대한 단서가 없습니다.

Vue에 단점이 있다면 이것이 유일한 것입니다.