obnizのフォーラムは新しいシステムに移行しております。
新しいフォーラムはこちらになりますconsole出力付きでプログラムを実行する方法
-
プログラムメニューでhtmlファイルを選択し「保存&開く」ボタンをクリックすると、フレームがポップアップしてプログラムが実行され、フレームの下部にconsole出力やデバッグ情報が出ます。
「ツール > 新しいタブで開く」ではconsole出力やデバッグ情報を表示する部分がないようです。質問１：新しいタブで開く場合にも、下部の欄を表示させる方法はあるでしょうか。
質問２：obnizのサイト以外にhtmlファイルを置いて（例えばPC内にローカル保存）、そのhtmlファイルをブラウザで開いて実行するときに下部の欄を付けることは可能でしょうか。
-
[保存&開く]は開発時の利用を想定しており，[新しいタブで開く]は開発が終わって他人に見せたりするときの利用を想定しています．
そのため，[保存&開く]では常にデバッグ情報が見えるようになっており，[新しいタブで開く]では見えないようになっています．
質問１：新しいタブで開く場合にも、下部の欄を表示させる方法はあるでしょうか。
各ブラウザの開発者ツールを使うことで，console出力やデバッグ情報を見ることができます．
各ブラウザでの開発者ツールの開き方はこちらを参照ください
https://eng-entrance.com/javascript-display-error質問２：obnizのサイト以外にhtmlファイルを置いて（例えばPC内にローカル保存）、そのhtmlファイルをブラウザで開いて実行するときに下部の欄を付けることは可能でしょうか。
質問１と同様に，開発者ツールを使うことで見ることができます．
-
ご回答いただきありがとうございます。
開発者ツールを使わなくて済む方法があればいいなと思って質問しました。ハンズオンで、サンプルプログラムを順番に試してもらう場面を想定しています。参加者が使うブラウザは様々なので、ブラウザの開発者画面を開いてもらうのはちょっと大変です。プログラムの実行画面の下にデバッグ出力が自動的に出ると、ブラウザによらず画面が統一できるので、説明も楽になりますし説明資料を作るのも楽になります。
もし、ハンズオンで使いやすい方法があれば教えていただけると助かります。「あれば」で結構です。
-
もしそのサンプルプログラムが自由に変更できるものであれば，
こちらのようなライブラリを入れることでhtml上でconsole.logを見ることができます．https://github.com/bahmutov/console-log-div
自由に改変できない場合は，[保存&開く]で見ていただく以外は開発者ツールで頑張るしか無いかなと思います．
-
情報ありがとうございます。
console-log-divを試してみます。プログラムは変更しないで単に実行してもらうだけならobniz cloudでできることに今気がついたので、ハンズオンはそれで最低限なんとかなりそうです。
・私の公開ページを開いてもらう。 https://obniz.io/users/xxx
・「開く」ボタンではなく、ファイル名のリンクをクリックしてもらう。
・開発画面が開くのでそこで「保存＆開く」ボタンをクリックしてもらう
・実行はできるが変更はできないハンズオンの冒頭にサンプルプログラム一式をダウンロードしてもらい、それを実行・改造してもらうという手順を考えていましたが、その方法は将来の課題にしようと思います。
