HTMLでコンソールの使い方がわからない

youtubeのチュートリアルを参考にワンタップゲームを作っています。
コンソールにエラーを表示させたいのですが、どこに、どのようなコードを書いたらいいでしょうか？

アプリを作るのは初めてなので右も左もわかりません。
ご教授お願いいたします。

（アプリキーとクライアントキーは偽です。）

発生している問題

ログイン画面が表示されない。
コンソールにエラーメッセージを表示させたい。

console.error("表示テスト");は何行目に入れたらよろしいでしょうか？

問題の発生している環境

HTML5
iMac(10.11.2)
Chrome(48.0.2564.116 (64-bit))

game.html

html
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <link rel="stylesheet" href="components/loader.css">
7    <link rel="stylesheet" href="css/style.css">
8    <script src="components/loader.js"></script>
9    <script src="js/ncmb-2.0.0.min.js"></script>
10    <script>
11        // Add your code here
12    </script>
13    <style>
14        body {
15            background-color: #BBDEFB;
16        }
17        form {
18            width: 320;
19            margin: 30px auto;
20            text-align: center;
21        }
22        input {
23            border-radius: 5px;
24            padding: 7px;
25            margin-bottom: 10px;
26            width: 200px;
27            font-size: 20px;
28        }
29    </style>
30</head>
31<body>
32
33    <form>
34        <input type="text" id="username" placeholder="User name" />
35        <input type="password" id="password" placeholder="Password" />
36        <input type="submit" value="Register/Login" />
37    </form>
38    
39    <script>
40        $(function() {
41            // mBaaSの初期化
42            var application_key = "5c27d2358af5fba85be1226b05c7a9cf9d3a13dc0d40b4136e49c168c8a1";
43            var client_key = "3e53a2f7dbf33deef6e5b5316c31bdb7b73f9e1aaa1df6a957f729ee8ef4";
44            var ncmb = new NCMB(application_key, client_key);
45            
46            // ログインチェック
47            var user = ncmb.User.getCurrentUser();
48            if (user !== null) {
49                location.href = "./game.html";
50            }
51            
52            // ログイン処理
53            $("form").on("submit", function() {
54                var username = $("#username").val();
55                var password = $("#password").val();
56                
57                ncmb.User.login(username, password)
58                .then(function() {
59                    // ログイン成功
60                    location.href = "./game.html";
61                    // alert("ログイン" + ncmb.User.getCurrentUser().userName);
62                })
63                .catch(function() {
64                   // ログイン失敗
65                   var user = new ncmb.User({
66                       userName: username,
67                       password: password
68                   });
69                   // 新規登録処理
70                   user.signUpByAccount()
71                   .then(function() {
72                        ncmb.User.login(username, password)
73                        .then(function() {
74                            // ログイン成功
75                            location.href = "./game.html";
76                            // alert("会員登録" + ncmb.User.getCurrentUser().userName);
77                        });
78                       
79                   });
80                });
81                return false; 
82            });
83        });
84    </script>
85</body>
86</html>
87

index.html

html
1
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <link rel="stylesheet" href="components/loader.css">
8    <link rel="stylesheet" href="css/style.css">
9    <script src="components/loader.js"></script>
10    <script src="js/ncmb-2.0.0.min.js"></script>
11    <script>
12
13        $(function(){
14            //mBaaSの初期化
15            var application_key = "d3705c27d2358af5fba85be1226b05c7a9cf9d3a13dc0d40b4136e49c168c8a1";
16            var client_key = "e5283e53a2f7dbf33deef6e5b5316c31bdb7b73f9e1aaa1df6a957f729ee8ef4";
17            var ncmb = new NCMB(application_key, client_key);
18            
19            var user = ncmb.User.getCurrentUser();
20            
21            // ログインチェック
22            if (user == null) {
23                location.href = "./index.html";
24            } else {
25                $("#username").text(user.userName + '(Log out)');
26            }
27           
28           // ログアウト
29           $("#username").on("click", function() {
30               ncmb.User.logout()
31               .then(function() {
32                   location.href = "./index.html";
33               })
34           });
35           
36           // canvasの設定
37           var canvas = document.getElementById("mycanvas");
38           var ctx = canvas.getContext("2d");
39           
40           //変数
41           var centerX = canvas.width / 2;
42           var centerY = canvas.height / 2;
43           var r;
44           var timerId;
45          
46          //スタート画面
47           ctx.font = "normal 28px Verdana";
48           ctx.textAlign = "center";
49           ctx.fillStyle = "#FFFFFF";
50           
51           ctx.fillText("Stop at Target!", centerX, centerY);
52          
53          //イベントの設定
54           $("#mycanvas").on("click", function() {
55               r = 0;
56               drawCircle()；
57           });
58           
59           //円を描く
60           function drawCircle() {
61               // クリア
62               ctx.fillStyle = "#BBDEFB";
63               ctx.fillRect(0, 0, canvas.width, canvas.height);
64               
65               //円を描く
66               ctx.fillStyle = "#1976D2";
67               ctx.beginPath();
68               ctx.arc(centerX, centerY, r, 0, Math.PI * 2, false);
69               ctx.fill();
70               
71               r++;
72               timerId = setTimeout(function() {
73                   drawCircle();
74               }, 12);
75           }
76        });        
77    </script>
78    <style>
79        body{
80            background-color: #BBDEFB;
81            padding-top: 20px;
82            font-family: Verdana, sans-serif;
83            text-align: center;
84        }
85        #mycanvas {
86            margin: 10px auto;
87        }
88    </style>
89</head>
90<body>
91    <div id="username"></div>
92    <canvas id="mycanvas" width="300" height="300"></canvas>
93</body>
94</html>

ogaaaan

2016/03/03 16:38

タイトルと内容が会ってないような・・・。ログイン画面を表示させたいのか、コンソールの使い方が知りたいのか、どっちなのかを明確にしておいたほうが良いんじゃないですかね。

行動規範の内容に同意します

回答1件

console.error('表示テスト'); は <script> タグ内ならどこに入れても大丈夫ですよ。
Chrome なら「Ctr + alt + j」を押すことでコンソールが表示され、表示テストと表示されます。
(もちろん console.error が実行されていればですが)

とりあえず index.html の下記に入れてみるのがいいと思います。

index.html
1$(fucntion(){
2  console.log('テスト');
3

投稿2016/03/10 01:57

編集2016/03/10 01:58

退会済みユーザー

総合スコア0

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！