I don't know about wgpu, but for vulkan, you can enable the "VK_KHR_shader_non_semantic_info" extension and you can then configure the validation layer to enable DebugPrintf. you'll also need to compile glsl shader with "GL_EXT_debug_printf" extension. then you can check the messages either from the validation layer output, or you can view them in RenderDoc!
but I suggest not to use this in fragment shaders, or render to a small image.
also, RenderDoc can debug shaders. you can debug a vertex shader for a single vertex, or a fragment shader for a single pixel.
I have never used browser for graphics, but I know the wgpu crate can run webgpu on native platform, and it supports spirv shaders, maybe you can try to debug your code on native target first?
yes, RenderDoc can records the shader invocation and let you "playback" the shader execution. you can set break points, single step, or even run backward or single step backward. at least that's the experience I get for vulkan and spirv. I assume wgpu has a vulkan backend so renderdoc should capture the draw calls too, but I never tried it.