テキストにDevToolsの内容を追加 #134

mathsuky · 2024-05-12T14:16:01Z

DevToolsについてのテキストを作成しました。
内容もそうですが，これをおく場所もここで良いのかがわからないのでアドバイスいただければと思います。

mathsuky · 2024-05-13T07:14:47Z

今年の講師陣にレビューお願いしようと思ったらAlterくんが見つけられなかった...

cp-20 · 2024-05-16T12:38:55Z

↑SysAdチームに入っていなかったからなので、入れた

mehm8128 · 2024-05-16T12:39:52Z

docs/chapter1/dicts/devtools/0_index.md

カンマじゃなくて読点に統一したいです

mehm8128 · 2024-05-16T12:40:13Z

docs/chapter1/dicts/devtools/0_index.md

+
+![DevTools-main](./images/DevTools-main.png)
+
+併せて，ショートカットを利用してDevToolsを開く方法を紹介します。WindowsまたはLinuxの場合は`Ctrl+Shift+C`で，Macの場合は`Cmd+Option+C`でDevToolsのElement(要素)タブを開くことができます。そのほかにもいくつかのショートカットがあり，詳細は[このページ](https://developer.chrome.com/docs/devtools/open?hl=ja)を参照してください。


F12の方が一般的だと思ってたけどどうなんだろ(ctrl+shift+c知らなかった)

↑わかる (ボクはCtrl+Shift+I派)

F12 の方が一般的ではあると思うのでそっちを書きたいかも？（Fn + F12 の人もいるのでそこもカバーしてほしいです）

mehm8128 · 2024-05-16T12:42:33Z

docs/chapter1/dicts/devtools/0_index.md

+### Consoleについて
+次に，Consoleについて説明します。
+DevToolsを開いてConsoleタブを選択すると，次のような画面が表示されると思います。
+<!-- 写真 -->


ここって画像入れ忘れですか？

mehm8128 · 2024-05-16T12:43:04Z

docs/chapter1/dicts/devtools/0_index.md

+次に，Consoleについて説明します。
+DevToolsを開いてConsoleタブを選択すると，次のような画面が表示されると思います。
+<!-- 写真 -->
+ここにはアプリケーションのすべてのログやエラーが表示されます。これを見ることにより，開発中に生じたエラーの詳細がわかり，エラーを解決するための手助けとなります。また，ConsoleではJavaScriptのコードを実行することもできます。例えば，次のようなコードをConsoleに直接入力してみてください。


console.log仕込んでデバッグに使えることも書きたいです

mehm8128 · 2024-05-16T12:45:39Z

docs/chapter1/dicts/devtools/0_index.md

+
+![DevTools-Network-Detail](./images/DevTools-Network-Detail.png)
+
+### Applicationについて


cookieいじれることも書いておきたいかもです

mehm8128 · 2024-05-16T12:46:27Z

docs/chapter1/dicts/devtools/images/DevTools-Console2.png

devtoolsってデフォルトで下に表示されるように気がするので、右側に移動する方法も書いておくといいかもです

Chromeはデフォルトで右側な気がします (要出典)

僕が今のPC使い始めたときは下だったはずだけど変わったのかな🤔(右側で使うという方法があることを2年か3年で知ったので)

mehm8128 · 2024-05-16T12:47:42Z

docs/chapter1/dicts/devtools/0_index.md

+
+併せて，ショートカットを利用してDevToolsを開く方法を紹介します。WindowsまたはLinuxの場合は`Ctrl+Shift+C`で，Macの場合は`Cmd+Option+C`でDevToolsのElement(要素)タブを開くことができます。そのほかにもいくつかのショートカットがあり，詳細は[このページ](https://developer.chrome.com/docs/devtools/open?hl=ja)を参照してください。
+
+## DevToolsの機能の紹介


https://traptitech.github.io/naro-text/chapter1/section2/0_vue-intro.html#vue-dev-tool でvueのdevtoos拡張入れさせるので、軽く触れてもいいかもです

cp-20

全体的にはすごい良い内容だと思います！　いくつか気になる点だけコメントしました！

cp-20 · 2024-05-16T12:40:38Z

docs/chapter1/dicts/devtools/0_index.md

@@ -0,0 +1,90 @@
+# DevToolsについて
+この章では，Webアプリ開発において欠かせないChrome DevToolsについて説明します。この章では基本的な内容に絞って説明していますので，DevToolsについてより詳細に知りたい人は[公式のドキュメント](https://developer.chrome.com/docs/devtools?hl=ja)を参照してください。


DevTools自体はChromeに限らない概念なので、上手くそこら辺を説明して欲しい感じある　DevToolsはそれぞれのブラウザにあるけど、今回はChromeを例にとって説明するね、みたいな

cp-20 · 2024-05-16T12:49:16Z

docs/chapter1/dicts/devtools/0_index.md

+
+![DevTools-main](./images/DevTools-main.png)
+
+併せて，ショートカットを利用してDevToolsを開く方法を紹介します。WindowsまたはLinuxの場合は`Ctrl+Shift+C`で，Macの場合は`Cmd+Option+C`でDevToolsのElement(要素)タブを開くことができます。そのほかにもいくつかのショートカットがあり，詳細は[このページ](https://developer.chrome.com/docs/devtools/open?hl=ja)を参照してください。


リンクは「このページ」とかではなく、中身を書いた方が良いとされている

ref: https://smarthr.design/accessibility/link-text/

cp-20 · 2024-05-16T12:53:19Z

docs/chapter1/dicts/devtools/0_index.md

+
+![DevTools-main](./images/DevTools-main.png)
+
+併せて，ショートカットを利用してDevToolsを開く方法を紹介します。WindowsまたはLinuxの場合は`Ctrl+Shift+C`で，Macの場合は`Cmd+Option+C`でDevToolsのElement(要素)タブを開くことができます。そのほかにもいくつかのショートカットがあり，詳細は[このページ](https://developer.chrome.com/docs/devtools/open?hl=ja)を参照してください。


↑わかる (ボクはCtrl+Shift+I派)

cp-20 · 2024-05-16T12:56:08Z

docs/chapter1/dicts/devtools/images/DevTools-Console2.png

Chromeはデフォルトで右側な気がします (要出典)

cp-20 · 2024-05-16T12:56:59Z

docs/chapter1/dicts/devtools/0_index.md

+
+Applicationの項目にはマニフェスト(manifest.jsonに含まれる名前やversionなどの情報)，Service Worker(ウェブアプリケーション，ブラウザー，そしてネットワークの間に介在するプロキシサーバーのように振る舞うもの)，ストレージなどアプリに関する全般的な情報が含まれます。
+
+Storageの項目には使用されているさまざまなストレージ方法が含まれており，編集することもできます。


日本語がちょっとびみょいかも？

Takeno-hito

ちょい足し

Takeno-hito · 2024-05-18T08:21:00Z

docs/chapter1/dicts/devtools/0_index.md

+
+![DevTools-main](./images/DevTools-main.png)
+
+併せて，ショートカットを利用してDevToolsを開く方法を紹介します。WindowsまたはLinuxの場合は`Ctrl+Shift+C`で，Macの場合は`Cmd+Option+C`でDevToolsのElement(要素)タブを開くことができます。そのほかにもいくつかのショートカットがあり，詳細は[このページ](https://developer.chrome.com/docs/devtools/open?hl=ja)を参照してください。


F12 の方が一般的ではあると思うのでそっちを書きたいかも？（Fn + F12 の人もいるのでそこもカバーしてほしいです）

mathsuky · 2024-05-20T13:47:51Z

指摘いただいた内容についてほぼ修正したと思いますので，追加の確認などお願いいたします。
ただ，しーぴーくんに指摘いただいたApplitcationの章の日本語がどうしても綺麗にできなかったので，助言いただきたいです:pray:

mathsuky · 2024-05-20T13:48:28Z

自分があまりApplicationの内容を開発で使ったことがないのもあって，どのような内容を初心者に伝えればわかっていないのが読みづらい原因の一つではあると思うので，その点などアドバイスいただけるとありがたいです。

cp-20 · 2024-05-20T13:58:07Z

指摘いただいた内容についてほぼ修正したと思いますので，追加の確認などお願いいたします。ただ，しーぴーくんに指摘いただいたApplitcationの章の日本語がどうしても綺麗にできなかったので，助言いただきたいです:pray:

レビューが分かりづらくてごめんなんだけど、ストレージの方に言及してた

cp-20

全体的にはすごい良くなってそうで流石です！　余裕あれば程度で1点だけコメントしました！

cp-20 · 2024-05-20T13:56:24Z

docs/chapter1/dicts/devtools/0_index.md

@@ -0,0 +1,104 @@
+# DevToolsについて
+この章では、Webアプリ開発において欠かせないDevToolsについて説明します。この章では基本的な内容に絞って説明していますので、DevToolsについてより詳細に知りたい人は[公式のドキュメント](https://developer.chrome.com/docs/devtools?hl=ja)を参照してください。なお、DevToolsはさまざまなWebブラウザにある機能ですが、今回はChrome DevToolsを題材に話を進めます。


[ntis] めちゃ細かい話だけど、DevToolsの公式ドキュメントとしてChromeが上がると (あながち間違いではないが) ちょいもやっとするかも　Chrome DevToolsの公式ドキュメントとして紹介する方がスッキリするかも

mathsuky · 2024-05-22T12:03:26Z

しーぴーくんにいただいた指摘(#134 (comment)) を修正しました!確認よろしくお願いします:pray:

mathsuky · 2024-05-22T12:05:34Z

講師陣以外の方もレビューリクエスト出させていただきましたが，余裕あればで大丈夫です:pray:

cp-20

良さそう！

Takeno-hito

LGTM

テキストにDevToolsの内容を追加

e0bed63

mathsuky requested review from Pugma and ramdos0207 May 13, 2024 07:13

cp-20 requested a review from alter334 May 16, 2024 12:38

mehm8128 reviewed May 16, 2024

View reviewed changes

cp-20 reviewed May 16, 2024

View reviewed changes

Takeno-hito reviewed May 18, 2024

View reviewed changes

指摘いただいた内容を修正

75ff5be

cp-20 reviewed May 20, 2024

View reviewed changes

Chrome DevToolsの公式documentであることを明言

58b8caf

mathsuky requested review from Takeno-hito, cp-20 and mehm8128 May 22, 2024 12:04

cp-20 approved these changes May 22, 2024

View reviewed changes

Takeno-hito approved these changes May 30, 2024

View reviewed changes

Merge branch 'main' into addTextAboutDevtools

1819b5f

Takeno-hito merged commit 0d2c9d5 into main May 30, 2024
3 checks passed

Takeno-hito deleted the addTextAboutDevtools branch May 30, 2024 21:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

テキストにDevToolsの内容を追加 #134

テキストにDevToolsの内容を追加 #134

mathsuky commented May 12, 2024

mathsuky commented May 13, 2024

cp-20 commented May 16, 2024

mehm8128 May 16, 2024

mehm8128 May 16, 2024

cp-20 May 16, 2024

Takeno-hito May 18, 2024

mehm8128 May 16, 2024

mehm8128 May 16, 2024

mehm8128 May 16, 2024

mehm8128 May 16, 2024

cp-20 May 16, 2024

mehm8128 May 16, 2024

mehm8128 May 16, 2024

cp-20 left a comment

cp-20 May 16, 2024

cp-20 May 16, 2024

cp-20 May 16, 2024

cp-20 May 16, 2024

cp-20 May 16, 2024

Takeno-hito left a comment

Takeno-hito May 18, 2024

mathsuky commented May 20, 2024

mathsuky commented May 20, 2024

cp-20 commented May 20, 2024

cp-20 left a comment

cp-20 May 20, 2024

mathsuky commented May 22, 2024 •

edited

Loading

mathsuky commented May 22, 2024

cp-20 left a comment

Takeno-hito left a comment


		![DevTools-main](./images/DevTools-main.png)

		併せて，ショートカットを利用してDevToolsを開く方法を紹介します。WindowsまたはLinuxの場合は`Ctrl+Shift+C`で，Macの場合は`Cmd+Option+C`でDevToolsのElement(要素)タブを開くことができます。そのほかにもいくつかのショートカットがあり，詳細は[このページ](https://developer.chrome.com/docs/devtools/open?hl=ja)を参照してください。


		![DevTools-Network-Detail](./images/DevTools-Network-Detail.png)

		### Applicationについて


		併せて，ショートカットを利用してDevToolsを開く方法を紹介します。WindowsまたはLinuxの場合は`Ctrl+Shift+C`で，Macの場合は`Cmd+Option+C`でDevToolsのElement(要素)タブを開くことができます。そのほかにもいくつかのショートカットがあり，詳細は[このページ](https://developer.chrome.com/docs/devtools/open?hl=ja)を参照してください。

		## DevToolsの機能の紹介

		@@ -0,0 +1,90 @@
		# DevToolsについて
		この章では，Webアプリ開発において欠かせないChrome DevToolsについて説明します。この章では基本的な内容に絞って説明していますので，DevToolsについてより詳細に知りたい人は[公式のドキュメント](https://developer.chrome.com/docs/devtools?hl=ja)を参照してください。


		Applicationの項目にはマニフェスト(manifest.jsonに含まれる名前やversionなどの情報)，Service Worker(ウェブアプリケーション，ブラウザー，そしてネットワークの間に介在するプロキシサーバーのように振る舞うもの)，ストレージなどアプリに関する全般的な情報が含まれます。

		Storageの項目には使用されているさまざまなストレージ方法が含まれており，編集することもできます。

		@@ -0,0 +1,104 @@
		# DevToolsについて
		この章では、Webアプリ開発において欠かせないDevToolsについて説明します。この章では基本的な内容に絞って説明していますので、DevToolsについてより詳細に知りたい人は[公式のドキュメント](https://developer.chrome.com/docs/devtools?hl=ja)を参照してください。なお、DevToolsはさまざまなWebブラウザにある機能ですが、今回はChrome DevToolsを題材に話を進めます。

テキストにDevToolsの内容を追加 #134

テキストにDevToolsの内容を追加 #134

Conversation

mathsuky commented May 12, 2024

mathsuky commented May 13, 2024

cp-20 commented May 16, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cp-20 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Takeno-hito left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mathsuky commented May 20, 2024

mathsuky commented May 20, 2024

cp-20 commented May 20, 2024

cp-20 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mathsuky commented May 22, 2024 • edited Loading

mathsuky commented May 22, 2024

cp-20 left a comment

Choose a reason for hiding this comment

Takeno-hito left a comment

Choose a reason for hiding this comment

mathsuky commented May 22, 2024 •

edited

Loading