#30daysofem 26일차: Debug.log, Debug.toString 및 REPL
5011 단어 elm
오늘 저는
Debug.log
로 로깅하거나 text (myVariable |> Debug.toString)
로 보기 기능에 표시하는 대신 REPL에서 내 기능을 테스트하는 방법을 배웠습니다.내 프로젝트는
elm init
를 입력하고 src/Main.elm
파일을 만든 새 디렉토리입니다.REPL은
elm.json
파일이 있는 경우 elm repl
를 입력하여 프로젝트 루트에서 시작할 수 있습니다. 그것이 Say :help for help and :exit to exit! More at https://elm-lang.org/0.19.1/repl
라고 말하는 방법에 유의하십시오.CTRL+C가 내 Mac에서 작동하지 않았지만
:exit
작동했습니다.1. Debug.log: console.log()와 비슷하지만 브라우저에서만 가능
이것은 처음에 나를 혼란스럽게했습니다. JavaScript에서는 원하는 곳에 console.log()
를 넣을 수 있습니다.
Elm에서 Debug.log
는 let
블록 내에 있어야 합니다(편집: 정확하지 않음 - 주석 참조). 내가 본 대부분의 코드는 값이 중요하지 않기 때문에 밑줄_
로 참조합니다(값이 있습니까?).
rangeEcho =
List.range 1 5
|> List.map
(\n ->
let
_ = Debug.log "The number is: " n
in
n
)
외로운 것n
은 무언가를 돌려줘야 하기 때문에 존재한다.
흥미롭게도 숫자가 거꾸로 나옵니다! 왜 그런지 알고 싶습니다.
이것은 터미널이 아닌 브라우저 개발 도구에만 표시된다는 점을 명심하십시오.
2. 텍스트(variableOfAnyType |> Debug.toString)
위의 함수는 다음과 같이 DOM에 표시될 수도 있습니다.
view =
text (rangeEcho |> Debug.toString)
-- [1,2,3,4,5]
Debug.log
보다 조금 더 좋지만 REPL이 가장 매력적이고 유연한 경험이라는 것을 알게 되었습니다.
3. 내 Main.elm 코드
Elm Tooling extension 과 함께 VS Code를 사용하는 경우 다음과 같은 줄이 상단에 추가될 것입니다.
module Main exposing (..)
이를 통해 파일에서 원하는 모든 것을 테스트하거나 다른 매개변수를 전달하거나 기능을 결합할 수 있습니다.
내가 작업한 파일은 다음과 같습니다. https://ellie-app.com/c4cRdN4y4Pta1
4. REPL 시작 및 사용
rangeEcho =
List.range 1 5
|> List.map
(\n ->
let
_ = Debug.log "The number is: " n
in
n
)
위의 함수는 다음과 같이 DOM에 표시될 수도 있습니다.
view =
text (rangeEcho |> Debug.toString)
-- [1,2,3,4,5]
Debug.log
보다 조금 더 좋지만 REPL이 가장 매력적이고 유연한 경험이라는 것을 알게 되었습니다.3. 내 Main.elm 코드
Elm Tooling extension 과 함께 VS Code를 사용하는 경우 다음과 같은 줄이 상단에 추가될 것입니다.
module Main exposing (..)
이를 통해 파일에서 원하는 모든 것을 테스트하거나 다른 매개변수를 전달하거나 기능을 결합할 수 있습니다.
내가 작업한 파일은 다음과 같습니다. https://ellie-app.com/c4cRdN4y4Pta1
4. REPL 시작 및 사용
module Main exposing (..)
elm repl
를 입력합니다. 거기에 elm.json
파일이 있어야 합니다. import Main exposing (..)
(또는 파일 이름이 무엇이든)이것은 제가 지금까지 해왔던 것보다 훨씬 더 좋은 작업 방식입니다.
자세한 내용은 다음 REPL 설명서를 참조하십시오. https://github.com/elm/compiler/blob/master/hints/repl.md
5. 스크린샷
먼저 test
가 오류를 발생시키는 것을 볼 수 있지만 import Main exposing (..)
를 입력한 후에는 작동합니다.
grid |> List.filter (\xy -> ...))
의 마지막 줄이 특히 좋았습니다. 이와 같이 대화식으로 테스트하는 것은 일반 로깅보다 기분이 좋지만 모든 것이 제자리에 있다고 생각합니다.
6. 결론
이것은 배울 수있는 재미있는 일이었습니다! REPL 런타임 동안 생성된 기능뿐만 아니라 Main.elm
기능에 대한 탭 완성을 얻을 수 있기를 바랍니다.
행복한 로깅, 내일 만나요!
Reference
이 문제에 관하여(#30daysofem 26일차: Debug.log, Debug.toString 및 REPL), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/kristianpedersen/30daysofelm-day-26-inspecting-values-with-debug-log-debug-tostring-and-the-repl-3k4k
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
이것은 배울 수있는 재미있는 일이었습니다! REPL 런타임 동안 생성된 기능뿐만 아니라
Main.elm
기능에 대한 탭 완성을 얻을 수 있기를 바랍니다.행복한 로깅, 내일 만나요!
Reference
이 문제에 관하여(#30daysofem 26일차: Debug.log, Debug.toString 및 REPL), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/kristianpedersen/30daysofelm-day-26-inspecting-values-with-debug-log-debug-tostring-and-the-repl-3k4k텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)