윅스 (Wix) 코딩 - 코딩 테스트 및 디버깅 (Wix Code: Testing and Debugging Your Code)

윅스 (Wix) 코딩 - 코딩 테스트 및 디버깅 (Wix Code: Testing and Debugging Your Code)

 

 

 

설명)

 

게시하기 전에 사이트를 미리보고 코드를 테스트하고 디버깅할 수 있습니다. 이렇게하면 예상대로 작동하는지 확인할 수 있습니다. 윅스 코드(Wix Code)가 활성화되지 않은 경우에도 사이트를 미리볼 때 코드가 실행됩니다.

 

개발자 콘솔 (Developer Console)

사이트를 미리볼 때 개발자 콘솔을 사용할 수 있습니다. 콘솔에는 오류, 경고, 디버그 메시지 및 기타 메시지와 같은 테스트 및 디버깅에 유용한 정보가 표시됩니다. 가능한 경우 백엔드 코드의 오류 및 디버그 메시지가 콘솔에 전송됩니다. 각 메시지는 유형 (예: 오류, 경고, 디버그), 코드가 있는 페이지 및 메시지를 트리거한 특정 코드 행에 대한 클릭 가능한 링크를 나타냅니다.

 

개발자 콘솔 보기 (To view the Developer Console) :

 

- 미리보기 모드에서 페이지 하단에 

  아이콘을 클릭합니다.

 

 

 

 

 

노트 :

코드에 오류가 있거나 콘솔에 메시지를 기록하지 않는한 개발자 콘솔은 기본적으로 축소되어 있습니다.

 

콘솔에서 메시지 지우기 (To clear messages from the Console) :

- 콘솔 메뉴 표시 줄에서 

 콘솔 지우기 아이콘을 클릭합니다.

 

 

콘솔 메시지를 필터링하기 (To filter Console messages) :

콘솔 메뉴 표시 줄에서 기본보기를 클릭한 다음 보고 싶은 메세지를 선택합니다.

- 디버그(Debug) : 콘솔에 기록한 메시지입니다

- 정보(Info) : 아무런 조치가 필요없는 정보 메시지입니다.

- 경고(Warning) : 코드의 잠재적 문제에 대한 메시지입니다. 노란색으로 강조 표시됩니다.

- 오류(Error) : 코드의 실제 오류에 대한 메시지입니다. 이들은 빨간색으로 강조 표시됩니다.

- 자세히(Verbose) : 낮은 수준의 코드 문제를 디버그하는 데 도움이 되는 시스템 로그 메시지입니다.

 

 

게시된 사이트와의 차이점 (Differences from Published Site)

미리보기 모드에서는 페이지를 보고 사이트 및 데이터와 상호 작용할 수 있지만 사이트는 게시될 때와 정확히 동일하게 작동하지 않습니다. 사이트를 미리볼 때 관리자 역할이 할당됩니다. 즉, 가능한 모든 권한이 부여됩니다. 라이브 사이트 사용자는 다른 권한을 가질 수 있으므로 액세스가 제한됩니다. 사이트를 미리볼 때 사이트의 샌드박스 데이터베이스에 있는 데이터로 작업하게 됩니다. 라이브 사이트의 사용자가 실제 데이터베이스를 사용하게 됩니다.

 

테스트 (Testing)

미리보기 모드로 들어가서 사이트를 테스트합니다. 라이브 사이트에서 수행할 수 있는 모든 작업을 수행할 수 있습니다. 컬렉션의 데이터와 상호 작용하는 경우 컬렉션의 샌드박스 버전을 사용하게 됩니다. 미리보기를 마치고 에디터로 돌아가면 사이트와의 상호 작용이 유지되지 않습니다. 사이트가 미리보기 모드를 시작하기 전의 상태로 되돌아갑니다. 그러나 미리보기 모드에서 사이트와의 상호 작용으로 인한 데이터 변경은 샌드박스 데이터베이스에서 지속됩니다.

 

 

디버깅 (Debugging)

윅스 코드(Wix Code)를 사용하면 최신 자바스크립트(JavaScript) 웹 기반 응용프로그램을 디버깅하는 것처럼 사이트의 코드를 디버깅할 수 있습니다. 그러나 디버깅을 시작하기 전에 알아두어야 할 몇 가지 사항이 있습니다.

 

클라이언트측 소스 파일 (Client-Side Source Files)

브라우저의 개발자 도구를 사용하여 클라이언트 측 코드를 디버깅합니다. 이 도구는 윅스(Wix)의 일부가 아니며 브라우저와 함께 제공됩니다. 사이트의 클라이언트측 코드가 포함된 파일의 이름을 식별하여 시작합니다. 이 파일의 이름은 사이트를 미리볼 때 윅스(Wix) 개발자 콘솔에 나타납니다. 그런 다음 브라우저의 개발자 도구를 사용하여 파일을 찾은 다음 breakpoints를 설정하거나 콘솔에 기록하여 다른 사이트를 디버그하는 것처럼 디버깅하십시오.

 

 

백엔드 코드 (Backend Code)

백엔드 자체에 직접 액세스할 필요가 없으므로 백엔드에서 코드를 디버깅하는 것이 분명 더 어렵습니다. 백엔드 코드 디버깅을 쉽게하기 위해 사이트를 미리볼 때 개발자 콘솔에 백엔드에 기록된 콘솔 메시지가 표시됩니다. 보안 문제로 인해 게시된 버전의 사이트에서 브라우저 콘솔에 메시지가 기록되지 않습니다.

 

 

HTTP 함수 (HTTP Functions)

console.log() 호출을 추가하여 HTTP 함수를 디버깅할 수 있습니다. 기록한 정보는 사이트를 미리볼 때 사이트의 개발자 콘솔에 나타납니다. 게시된 버전의 사이트를 볼 때 콘솔에 아무것도 기록되지 않습니다. 메시지 로깅은 미리보기에서만 실행되므로 로깅된 내용을 보려면 테스트 버전의 엔드 포인트를 호출해야합니다.

 

HTTP 함수에서 console.log()를 사용하여 디버깅하기 :

 

1. HTTP 함수의 코드에서 console.log()에 대한 호출을 추가합니다.

2. 사이트를 저장합니다.

3. 사이트 미리보기를 합니다.

4. 외부 응용프로그램에서 테스트 엔드 포인트 (_functions-dev가있는 URL)를 호출합니다.

5. 기록된 메시지는 사이트의 개발자 콘솔에 나타납니다.

 

 

소스맵 (Source Maps)

브라우저에서 코드를 디버깅할 때 원본 소스 코드처럼 보입니다. 실제로, 작성한 코드는 실행되는 실제 코드가 아닙니다. 소스맵을 사용하면 장면 뒤에서 일어나는 일에 대해 걱정할 필요가 없습니다. 그러나 궁금한 점이 있으면 이 일이 일어납니다.

 

윅스 코드(Wix Code)는 ES2015 표준을 사용하여 코드를 작성하는 것을 지원합니다. 그러나 이 표준이 모든 브라우저에서 완전히 구현되기 전에는 코드가 ES2015 코드에서 ES5로 이동됩니다. 또한 코드가 축소되어 소스 파일이 결합되어 서버에서보다 효율적으로 전달됩니다.

 

따라서 사이트에서 실제로 실행되는 코드는 이동, 축소 및 결합됩니다. 생성된 코드를 디버그하고 싶지는 않습니다. 원래 작성한 코드를 디버그하려고 합니다. 그것은 소스맵이 들어있는 곳입니다.

 

소스맵은 브라우저가 실제로 실행중인 코드 행을 원래 소스 코드의 행과 맵핑하는 파일입니다. 일부 코드를 디버그할 때 소스맵을 사용하면 디버거가 소스맵을 사용하여 해당 생성된 코드를 실행하더라도 작성한 원래 버전의 코드를 찾을 수 있습니다.

 

이 모든 일은 당신이 아무것도 할 필요없이 일어나야 합니다. 문제가 발생하면 브라우저의 개발자 도구 설정을 확인하고 소스맵이 사용 설정되어 있는지 확인합니다.

 

 

 

연관된 토픽)

윅스 (Wix) 코딩 - 자바스크립트 (JavaScript) (Wix Code: JavaScript Support)

윅스 (Wix) 코딩 - 코드 패널 (Wix Code: Working in the Code Panel)

윅스 (Wix) 코딩 - 컬렉션 권한 (About Collection Permissions)

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

https://support.wix.com/en/article/wix-code-testing-and-debugging-your-code