rabbit-slide-myokoym-sinatrasapporo-20160619 2016.6.19.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: b543a6e2a020f9f57ac8c955c500ed3de84a9ac3
+  data.tar.gz: 6c62254b069a0902c6470264c6334df19c68bde8
+SHA512:
+  metadata.gz: 5bbb9413c90f5dc78669ca153fb1d5a933322f7cdc3e8f87074f3e8b7051f07b5fbe0e08ab8018902fff1ab98a095d0d61bac1696dd62c59be9063718b441f47
+  data.tar.gz: 1b9e6247d54261e164d9c5ba244b4d507914bcffee10cf2c57cab691eadf0c5859304c6e3de7bf9b1c87d4413bf76435e10376ba8ffab8c54df6823d85f26306

data/.rabbit

@@ -0,0 +1 @@
+introduction-of-webapp-debugging.md

data/README.md

@@ -0,0 +1,24 @@
+# SPAデバッグ入門
+
+主にSPAを対象としたWebアプリケーションのデバッグについてFirefoxの開発ツールを例に紹介
+
+## 作者向け
+
+### 表示
+
+    rake
+
+### 公開
+
+    rake publish
+
+## 閲覧者向け
+
+### インストール
+
+    gem install rabbit-slide-myokoym-sinatrasapporo-20160619
+
+### 表示
+
+    rabbit rabbit-slide-myokoym-sinatrasapporo-20160619.gem
+

data/Rakefile

@@ -0,0 +1,17 @@
+require "rabbit/task/slide"
+
+# Edit ./config.yaml to customize meta data
+
+spec = nil
+Rabbit::Task::Slide.new do |task|
+  spec = task.spec
+  # spec.files += Dir.glob("doc/**/*.*")
+  # spec.files -= Dir.glob("private/**/*.*")
+  spec.add_runtime_dependency("rabbit-theme-nyankosakana")
+end
+
+desc "Tag #{spec.version}"
+task :tag do
+  sh("git", "tag", "-a", spec.version.to_s, "-m", "Publish #{spec.version}")
+  sh("git", "push", "--tags")
+end

data/config.yaml

@@ -0,0 +1,22 @@
+---
+id: sinatrasapporo-20160619
+base_name: introduction-of-webapp-debugging
+tags:
+  - sinatrasapporo
+  - firefox
+presentation_date: 2016/06/19
+version: 2016.6.19.0
+licenses:
+  - CC BY 4.0
+slideshare_id: 
+speaker_deck_id: 
+ustream_id: 
+vimeo_id: 
+youtube_id: 
+author:
+  markup_language: :md
+  name: Masafumi Yokoyama
+  email: myokoym@gmail.com
+  rubygems_user: myokoym
+  slideshare_user: 
+  speaker_deck_user: 

data/introduction-of-webapp-debugging.md

@@ -0,0 +1,217 @@
+# SPAデバッグ入門
+
+author
+:   Masafumi Yokoyama
+
+content-source
+:   勉強会@Sinatra札幌
+
+date
+:   2016-06-19
+
+allotted-time
+:   40m
+
+theme
+:   nyankosakana
+
+# さいきんのおしごと
+
+* Firefox
+* AngularJS
+* Rails
+
+# SPAデバッグ入門
+
+# SPAとは
+
+* Single Page Application
+  * ページ遷移なし
+  * AjaxやWebSocketなどを使って通信
+
+# デバッグとは
+
+* バグを見つける
+* 直す
+
+# デバッグとは
+
+* *バグを見つける*
+* 直す
+
+# バグを見つける
+
+* デバッグツール
+* 事例
+
+# バグを見つける
+
+* *デバッグツール*
+* 事例
+
+# デバッグツール
+
+* Firefox/Google Chrome標準添付
+  * F12で出てくるやつ
+  * 標準添付のツールが充実してきたので、Live HTTP HeadersやHttpFox、Findbugsなどは不要になってきている
+
+# デバッグツール
+
+Firefoxの開発ツールを例にいくつか紹介
+
+# 開発ツール
+
+* インスペクタ
+* Webコンソール
+* ネットワークモニタ
+
+# 開発ツール
+
+* *インスペクタ*
+* Webコンソール
+* ネットワークモニタ
+
+# インスペクタ
+
+* 要素を調査
+* DOMを調べる
+  * 要素(element)があるか
+  * 属性(attribute)があるか
+
+{::note} https://developer.mozilla.org/ja/docs/Tools/Page_Inspector {:/note}
+
+# 要素
+
+```html
+<a href="..."></a>
+```
+
+# 属性
+
+```html
+href="..."
+```
+
+# 要素を調査
+
+デモ
+
+# 開発ツール
+
+* ~~インスペクタ~~
+* *Webコンソール*
+* ネットワークモニタ
+
+# Webコンソール
+
+* JavaScriptなどのログを記録
+  * console.log
+* JavaScriptのコードを実行してWebページと対話
+
+{::note} https://developer.mozilla.org/ja/docs/Tools/Web_Console {:/note}
+
+# Webコンソール
+
+デモ
+
+# 開発ツール
+
+* ~~インスペクタ~~
+* ~~Webコンソール~~
+* *ネットワークモニタ*
+
+# ネットワークモニタ
+
+* ネットワークリクエストの詳細を表示
+  * HTTPステータス
+  * リクエスト/レスポンス
+
+{::note} https://developer.mozilla.org/ja/docs/Tools/Network_Monitor {:/note}
+
+# ネットワークモニタ
+
+デモ
+
+# バグを見つける
+
+* ~~デバッグツール~~
+* *事例*
+
+# 事例
+
+* かいはつしゃはそうしんボタンをおした
+* しかしなにもおこらなかった
+
+# :-O
+
+# 切り分ける
+
+* どこでエラーになっているか
+  * クライアント
+  * サーバー
+  * ネットワーク
+
+# そうび
+
+* ネットワークモニタ
+* Webコンソール
+* サーバーのログ
+
+# かいはつしゃはネットワークモニタをつかった
+
+# かいはつしゃはネットワークモニタをつかった
+
+* リクエストは未送信だった
+* エラーが返ってきていた
+* 送信したまま返ってきていなかった
+
+# かいはつしゃはネットワークモニタをつかった
+
+* *リクエストは未送信だった*
+* エラーが返ってきていた
+* 送信したまま返ってきていなかった
+
+# リクエストは未送信だった
+
+* クライアントでエラーが起きている
+* Webコンソールを使って調査
+
+# かいはつしゃはWebコンソールをつかった
+
+* JavaScriptにログを仕込む
+* Webコンソールにログが出る
+
+# かいはつしゃはネットワークモニタをつかった
+
+* ~~リクエストは未送信だった~~
+* *エラーが返ってきていた*
+* 送信したまま返ってきていなかった
+
+# エラーが返ってきていた
+
+* ステータスコードを見る
+
+# ステータスコードを見る
+
+* 400番台ならクライアントが悪そう
+  * リクエストパラメータを確認
+  * サーバーのログを見る
+* 500番台ならサーバーが悪そう
+  * サーバーのログを見る
+
+# かいはつしゃはネットワークモニタをつかった
+
+* ~~リクエストは未送信だった~~
+* ~~エラーが返ってきていた~~
+* *送信したまま返ってきていなかった*
+
+# 送信したまま返ってきていなかった
+
+* ネットワーク不調の可能性
+  * WiFi有効になってる？
+  * ping通る？
+
+# まとめ
+
+* 標準ツールが充実
+* クライアントかサーバーかネットワークか切り分けよ

metadata

@@ -0,0 +1,78 @@
+--- !ruby/object:Gem::Specification
+name: rabbit-slide-myokoym-sinatrasapporo-20160619
+version: !ruby/object:Gem::Version
+  version: 2016.6.19.0
+platform: ruby
+authors:
+- Masafumi Yokoyama
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2016-06-18 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rabbit
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.0.2
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.0.2
+- !ruby/object:Gem::Dependency
+  name: rabbit-theme-nyankosakana
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: 主にSPAを対象としたWebアプリケーションのデバッグについてFirefoxの開発ツールを例に紹介
+email:
+- myokoym@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".rabbit"
+- README.md
+- Rakefile
+- config.yaml
+- introduction-of-webapp-debugging.md
+- pdf/sinatrasapporo-20160619-introduction-of-webapp-debugging.pdf
+homepage: http://slide.rabbit-shocker.org/authors/myokoym/sinatrasapporo-20160619/
+licenses:
+- CC BY 4.0
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.5.1
+signing_key: 
+specification_version: 4
+summary: SPAデバッグ入門
+test_files: []