Clique em qualquer trecho sublinhado do CSS gerado. A página faz o que o DevTools faz: decodifica o segmento do mappings e aponta a linha e a coluna no .scss original.
O CSS chega com o comentário /*# sourceMappingURL=style.css.map */ na última linha (ou com o header HTTP SourceMap: …). O navegador ignora o comentário na hora de aplicar os estilos.
Só com o DevTools aberto, o painel descobre o mapa: o protocolo CDP envia CSS.styleSheetAdded com sourceMapURL no cabeçalho da folha de estilo. Quem baixa e decodifica o .map é a interface do DevTools, não o motor que renderiza a página.
Cada sources[i] é resolvido como URL relativa ao próprio .map, com sourceRoot na frente. Se existir sourcesContent, o texto do SCSS vem de lá; senão, o DevTools baixa cada .scss por HTTP. Esses pedidos são do próprio DevTools, não da página: o painel Developer resources mostra se cada mapa carregou.
O mappings vira uma tabela ordenada de pontos: (linha, coluna) no CSS → (arquivo, linha, coluna) no SCSS. É a mesma decodificação desta página.
No painel Styles, o CDP informa onde cada seletor e cada declaração começa no CSS (range). O DevTools procura, naquela linha, o segmento com a maior coluna que não passe dessa posição, e troca o link style.css:8 por _botao.scss:10. O clique abre o SCSS no painel Sources, agrupado em "Authored".