Improve debugging page in docs (#2928)

* Improve debugging page in docs

- add gloo console logging as an option
- moved subsubheading "Latest Info" under "Source Maps" to a subheading "Past Articles", which makes more sense for the content
- updated examples for `wasm-logger` and also made an equivalent one for `gloo-console`

I removed a lot of text to make it easier to read and improve clarity.
I did look it over but there may be other info you'd like to keep on the page.

I wanted to add more for `panics` but I wasn't sure what to put.

* Run Prettier

* Mention tracing-web under console logging

The source map support is also changed but will require more explanation.

website/docs/more/debugging.mdx

@@ -4,40 +4,88 @@ title: 'Debugging'
 
 ## Panics
 
-The [`console_error_panic`](https://github.com/rustwasm/console_error_panic_hook) crate catches
-`panic!`s and outputs them to the console. Yew will automatically catch `panic!`s and log them to
-your browser's console.
+Yew automatically logs panics in the browser console.
 
 ## Console Logging
 
-In general, Wasm web apps are able to interact with Browser APIs, and the `console.log` API is no
-exception. There are a few options available:
+In JavaScript, `console.log()` is used to log to the browser console. Some options for Yew are listed below.
 
 ### [`wasm-logger`](https://crates.io/crates/wasm-logger)
 
-This crate integrates with the familiar Rust `log` crate:
+`wasm-logger` crate integrates with [`log`](https://crates.io/crates/log) crate to send the log level, source line and filename to the browser console.
 
 ```rust ,ignore
-// setup
+use log::info;
+use wasm_bindgen::JsValue;
+
 fn main() {
     wasm_logger::init(wasm_logger::Config::default());
-}
 
-// usage
-log::info!("Update: {:?}", msg);
+    let object = JsValue::from("world");
+    info!("Hello {}", object.as_string().unwrap());
+}
+```
+
+### [`gloo-console`](https://crates.io/crates/gloo-console)
+
+This crate is part of Gloo, a collection of libraries providing ergonomic Rust wrappers for browser APIs.
+The `log!` macro can take a `JsValue` directly which is slightly easier to use than `wasm_logger`.
+
+```rust ,ignore
+use gloo_console::log;
+use wasm_bindgen::JsValue;
+
+fn main() {
+    let object = JsValue::from("world");
+    log!("Hello", object)
+}
+```
+
+### [`tracing-web`](https://crates.io/crates/tracing-web)
+
+`tracing-web` can be used with [`tracing-subscriber`](https://crates.io/crates/tracing-subscriber to output messages to the browser console.
+
+```rust, ignore
+use tracing_subscriber::{
+    fmt::{
+        format::{FmtSpan, Pretty},
+        time::UtcTime,
+    },
+    prelude::*,
+};
+use wasm_bindgen::JsValue;
+
+fn main() {
+    let fmt_layer = tracing_subscriber::fmt::layer()
+        .with_ansi(false)
+        .with_timer(UtcTime::rfc_3339())
+        .with_writer(tracing_web::MakeConsoleWriter)
+        .with_span_events(FmtSpan::ACTIVE);
+    let perf_layer = tracing_web::performance_layer().with_details_from_fields(Pretty::default());
+
+    tracing_subscriber::registry()
+        .with(fmt_layer)
+        .with(perf_layer)
+        .init();
+    let object = JsValue::from("world");
+    tracing::info!("Hello {}", object.as_string().unwrap());
+}
 ```
 
 ## Debugging component lifecycles
 
-Yew makes use of the [`tracing`](https://crates.io/crates/tracing) crate to emit debug information about lifecycle events of components. These can be used to trace why and when a component is created, updated, rerendered or destroyed.
+[`tracing`](https://crates.io/crates/tracing) can be used to collect event information related to a component's lifecycle. `tracing` also comes with a feature flag for `log` support, which integrates nicely with `wasm-logger`.
 
-To make use of this, you need to [register a `Subscriber`](https://docs.rs/tracing/latest/tracing/#in-executables) or enable the `"log"` feature for compatibility with the `log` crate, e.g. when using `wasm-logger`. A subscriber is supposed to be chosen only by the final executable crate, not by library crates. You can also turn on compile-time [flags to disable logging](https://docs.rs/tracing/latest/tracing/level_filters/index.html#compile-time-filters) statically, for a smaller wasm file size.
+[Compile time filters](https://docs.rs/tracing/latest/tracing/level_filters/index.html#compile-time-filters) can be used to adjust verbosity or disable logging, which should result in a smaller Wasm file.
 
 ## Source Maps
 
-There is currently no first-class support for source maps for Rust / Wasm web apps. This, of course, is subject to change. If this is no longer true or if progress is made, please suggest a change!
+There is [some support](https://developer.chrome.com/blog/wasm-debugging-2019/#enter-dwarf) for source maps.
+However, some configuration is required.
 
-### Latest Info
+## Past Articles
+
+Some past articles on the state of debugging in WebAssembly in Rust can be found below. They may serve as interesting reads.
 
 \[Dec 2019\] [Chrome DevTools update](https://developers.google.com/web/updates/2019/12/webassembly#the_future)