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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

9565閲覧

Google Chromeのデベロッパーツールでconsole.logが表示されない

naota7118

総合スコア7

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/07/23 07:18

やりたいこと

Google Chromeのデベロッパーツールでconsole.logが表示されるようにしたい。
おそらくデベロッパーツールで非表示にする設定をしてしまっていると思うので、表示させる設定に戻したい。
※ちなみにエラーも表示されません。

経緯

未経験からエンジニアへの転職を目指しており、転職活動用の個人アプリを作成中です。
食べたものやカロリーなどを投稿するアプリです。
投稿の非同期通信を実装し、非同期で投稿できるようになったのはいいのですが、デベロッパーツールでconsole.logが表示されなくなってしまいました。

非同期通信は問題なく機能していることから、デベロッパーツールの設定の問題と予想しています。
どこかのタイミングでデベロッパーツールでエラーやconsole.logを非表示にする設定をしたのだと思います。
どこかの設定をいじった記憶はあるのですが、正確に覚えておりません。

投稿直後のデベロッパーツール画面

イメージ説明

期待していた結果

非同期通信を下記のように記述したことから、本来hogehelloと表示されなければおかしいのですが、実際は表示されません。

JavaScript

1$(function(){ 2 3 function buildHTML(post) { 4 var html = (省略) 5 return html; 6 } 7 8 $('#new_post').on('submit', function(e){ 9 e.preventDefault() 10 console.log('hoge'); 11 var formData = new FormData(this); 12 // action属性の値を取得 →/posts 13 var url = $(this).attr('action'); 14 $.ajax({ 15 url: url, 16 type: 'POST', 17 data: formData, 18 dataType: 'json', 19 processData: false, 20 contentType: false 21 }) 22 .done(function(data){ 23 var html = buildHTML(data); 24 $('.posts').prepend(html); 25 console.log('hello'); 26 // $('.posts').animate({ scrollTop: $('.posts')[0].scrollHeight}); 27 $('form')[0].reset(); 28 $(".post-btn").prop("disabled", false); 29 console.log(html); 30 }) 31 .fail(function(){ 32 alert('投稿できませんでした'); 33 console.log('hello'); 34 }) 35 }); 36});

試したこと

「デベロッパーツール console.log 表示されない」などのキーワードで検索し調べましたが、デベロッパーツールのconsole.logの表示/非表示を設定する記事が見つけられませんでした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

フィルターに入力があるようですが、これをクリアしたらどうでしょう?
イメージ説明

投稿2020/07/23 14:58

mcho71

総合スコア67

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

naota7118

2020/07/23 17:21

フィルターをクリアしたら無事エラーやconsole.logの結果が表示されるようになりました!大変助かりました。本当にありがとうございました!
guest

0

右上に「3 hidden」と出ていますが、その隣の歯車を押すと、何を隠すかの設定が出てくるようです。

投稿2020/07/23 07:20

maisumakun

総合スコア145184

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

naota7118

2020/07/23 07:25

ご回答頂きありがとうございます。 隣の歯車を押すと、8つのチェックボックスが出てきまして、それら全てにチェックを入れたのですが、それでも表示されない状態です。 歯車にカーソルを合わせますと「Console settings」と出てきたので、そのキーワードで調べてみようと思います。
maisumakun

2020/07/23 07:27

> 隣の歯車を押すと、8つのチェックボックスが出てきまして、それら全てにチェックを入れたのですが、それでも表示されない状態です。 チェックを入れた後に再実行しても表示されない、ということでしょうか?
naota7118

2020/07/23 07:29

>チェックを入れた後に再実行しても表示されない、ということでしょうか? はい、おっしゃる通りです。 チェックを入れてから投稿してみましたが、それでも表示されませんでした。 ![イメージ説明](28d8062fc50252b224ced904fbd55508.png)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問