feat(repl): コンソールの開き方とデバッグ

[azu]

コードの評価と結果の表示

目的: ブラウザでのコード評価方法、Console APIの使い方、構文エラーとデバッグについて学ぶ

• ブラウザ
• Firefox
• 開発者
• コンソール

ここではブラウザの評価方法と確認方法について扱う。
エラーが発生したときに何をするかを考える。

扱わないこと

• Node.js
• デバッグ方法
• Node.jsのREPL
• ブレークポイント

アウトライン

• ブラウザの選択 => Firefox
• ブラウザでの実行方法
• index.htmlとindex.jsを作成しscriptとして読み込んで実行する
• Console APIの使い方を学ぶ
  • 開発者ツールの開き方
  • コードの実行方法、REPL
• (ウェブ版) ウェブ版ではこの方法はワンクリックでできるようになっている
• Node.jsについては2章であつかいます
• 構文エラー(SyntaxError)が出る場合について
  • 例) const 2015;
  • スタックトレースの簡単な読み方
  • 詳細はtry...catchの章
• 構文エラーは人間向けのエラーではない問題
  • 例) cosnt a = 1;
  • エラーの行例の前後も見てみよう
  • Firefoxではコンソールにエラーの詳細へのリンクがでるぞ
• 実行時エラー(ランタイムエラー)
  • 例): console.logs()
  • 構文としては正しいが実行時に問題があり例外発生するもの
  • TypeErrorなどSyntaxError以外のもの
  • 実行時エラーは単純なものから複雜なもの(値に依存するもの)がある
• デバッグ
  • あわてずにエラーの原因を追っていく => デバッグ
  • エラー文を検索する or MDNのエラーで該当してないものがあるものをみる or コードをよく読む
  • SyntaxError => あなたの書き方がなにか間違っています
  • TypeError => コードの動かしやメソッドの呼び出し方が何かおかしいです。どこでおかしくなったのかをconsole APIで見よう
• まとめ
  • コードの実行
  • ログの出し方
  • エラーの種類
  • デバッグ

fix #85

[bot-user]

Deploy preview for js-primer ready!

Built with commit f0c1319

https://deploy-preview-545--js-primer.netlify.com