#30daysofem 26일차: Debug.log, Debug.toString 및 REPL

5011 단어 elm
이것은 내 26 일입니다

오늘 저는 Debug.log로 로깅하거나 text (myVariable |> Debug.toString)로 보기 기능에 표시하는 대신 REPL에서 내 기능을 테스트하는 방법을 배웠습니다.
  • 1. Debug.log: Like console.log(), but only in the browser
  • 2. text (variableOfAnyType |> Debug.toString)
  • 3. My Main.elm code
  • 4. Starting and using the REPL
  • 5. Screenshot
  • 6. Conclusion

  • 내 프로젝트는 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.loglet 블록 내에 있어야 합니다(편집: 정확하지 않음 - 주석 참조). 내가 본 대부분의 코드는 값이 중요하지 않기 때문에 밑줄_로 참조합니다(값이 있습니까?).

    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 시작 및 사용


  • 터미널을 열고 프로젝트 루트에 elm repl를 입력합니다. 거기에 elm.json 파일이 있어야 합니다.
  • Enter import Main exposing (..)(또는 파일 이름이 무엇이든)
  • 이제 프로젝트에서 함수 이름만 입력하면 됩니다.
  • Main.elm에서 새 기능을 수정하거나 생성할 수도 있으며 REPL은 다시 시작할 필요 없이 자동으로 해당 기능에 액세스할 수 있습니다!

  • 이것은 제가 지금까지 해왔던 것보다 훨씬 더 좋은 작업 방식입니다.

    자세한 내용은 다음 REPL 설명서를 참조하십시오. https://github.com/elm/compiler/blob/master/hints/repl.md

    5. 스크린샷





    먼저 test가 오류를 발생시키는 것을 볼 수 있지만 import Main exposing (..)를 입력한 후에는 작동합니다.
    grid |> List.filter (\xy -> ...))의 마지막 줄이 특히 좋았습니다. 이와 같이 대화식으로 테스트하는 것은 일반 로깅보다 기분이 좋지만 모든 것이 제자리에 있다고 생각합니다.

    6. 결론



    이것은 배울 수있는 재미있는 일이었습니다! REPL 런타임 동안 생성된 기능뿐만 아니라 Main.elm 기능에 대한 탭 완성을 얻을 수 있기를 바랍니다.

    행복한 로깅, 내일 만나요!

    좋은 웹페이지 즐겨찾기