Observação
O acesso a essa página exige autorização. Você pode tentar entrar ou alterar diretórios.
O acesso a essa página exige autorização. Você pode tentar alterar os diretórios.
Para ver e trabalhar com segurança com o código-fonte de desenvolvimento original no DevTools, em vez do código de produção compilado, minificado e empacotado retornado pelo servidor Web, use mapas de origem atendidos pelo servidor de símbolos do Azure Artifacts.
Publicar seus mapas de origem diretamente no servidor Web tornaria seu código-fonte original visível publicamente. Para evitar tornar seu código-fonte original visível publicamente, publique seus mapas de origem no servidor de símbolos do Azure Artifacts. Essa abordagem possibilita o uso de mapas de origem no DevTools, ao depurar seu site de produção, sem publicar os mapas de origem no servidor Web.
Os mapas de origem mapeiam o código de produção compilado para os arquivos de origem de desenvolvimento originais. No DevTools, você pode ver e trabalhar com seus arquivos de origem de desenvolvimento familiares, em vez do código compilado. Para saber mais sobre o mapeamento de origem e o uso de mapas de origem no DevTools, consulte Mapear o código processado para o código-fonte original, para depuração.
Conceitos
Você deve indexar seus mapas de origem no servidor de símbolos do Azure Artifacts, para que seus mapas de origem estejam disponíveis para o DevTools quando você depurar seu site de produção.
Para fazer isso, adicione a x_microsoft_symbol_client_key propriedade string aos mapas de origem no tempo de compilação. Esta propriedade contém o valor hexadecimal minúsculo do hash SHA-2 de 256 bits do arquivo de origem original correspondente.
O DevTools é capaz de calcular esse hash para cada um de seus arquivos compilados e usar o hash para recuperar o mapa de origem correto do servidor de símbolos do Azure Artifacts. Para recuperar com segurança seus mapas de origem, o DevTools usa um Token de Acesso Pessoal que você fornece para se conectar ao servidor de símbolos do Azure Artifacts.
Etapa 1: Gerar um token de acesso pessoal para o Azure DevOps
A publicação de mapas de origem para o servidor de símbolos do Azure Artifacts requer um Token de Acesso Pessoal (ou PAT). Esse PAT será usado pelo seu sistema de compilação ao compilar código e publicar mapas de origem.
Para gerar um PAT no Azure DevOps:
Entre na organização do DevOps do Azure acessando .
https://dev.azure.com/{yourorganization}No DevOps do Azure, acesse Configurações >do usuárioTokens de acesso pessoal:
A página Tokens de Acesso Pessoal é exibida:
Clique em Novo Token. A caixa de diálogo Criar um novo token de acesso pessoal é aberta:
Na caixa de texto Nome , insira um nome para o PAT, como "publicar mapas de origem".
Na seção Expiração , insira uma data de expiração para o PAT.
Na seção Escopos , clique em Mostrar todos os escopos para expandir a seção.
Role para baixo até a seção Símbolos e marque a caixa de seleção Ler & gravar .
Clique no botão Criar . A caixa de diálogo Êxito! é exibida:
Clique no botão Copiar para a área de transferência para copiar a PAT. Copie o token e armazene-o em um local seguro. Para sua segurança, ele não será mostrado novamente.
Para saber mais sobre o PAT, consulte Usar tokens de acesso pessoal.
Etapa 2: Calcular o hash SHA-256 do script e anexá-lo aos mapas de origem
Na etapa final do processo de criação do aplicativo, para cada mapa de origem que você deseja publicar, você deve calcular o hash SHA-256 do arquivo JavaScript ao qual o mapa de origem corresponde e anexá-lo ao mapa de origem por meio da x_microsoft_symbol_client_key propriedade string.
Os sistemas de build variam de aplicativo para aplicativo, portanto, não há uma maneira clara e única de aplicar isso. Mas aqui está um exemplo de plug-in do Webpack 5, que pode ser adicionado à configuração do Webpack se você o estiver usando:
// file: webpack.plugin-symbols.js
// Copyright (C) Microsoft Corporation. All rights reserved.
// Licensed under the BSD 3-clause license.
const crypto = require('crypto');
module.exports = class PrepareSourceMapsForSymbolServerPlugin {
/**
* @param {import('webpack').Compiler} compiler
* @returns {void}
*/
apply(compiler) {
compiler.hooks.emit.tap('PrepareSourceMapsForSymbolServerPlugin', (compilation) => {
const files = Object.keys(compilation.assets);
const sourceMaps = files.filter(v => v.endsWith('.map'));
const sourceFilesAndMapsNames = sourceMaps.map(mapFileName => {
const sourceFileName = mapFileName.substring(0, mapFileName.length - 4);
return {
sourceFileName,
mapFileName,
};
});
const sourceFiles = sourceFilesAndMapsNames.map(({ sourceFileName, mapFileName }) => {
const sourceFile = compilation.assets[sourceFileName];
const sourceFileBuffer = sourceFile.buffer();
const hasher = crypto.createHash('sha256');
hasher.write(sourceFileBuffer);
const digest = hasher.digest();
const sourceFileHash = digest.toString('hex');
const sourceMapAsset = compilation.assets[mapFileName];
const sourceMapSource = sourceMapAsset.source();
const sourceMapContents = JSON.parse(sourceMapSource);
sourceMapContents['x_microsoft_symbol_client_key'] = sourceFileHash;
const rewrittenSourceMapContents = JSON.stringify(sourceMapContents);
if (!sourceMapAsset.isBuffer()) {
// Not a buffer -- write to the _value property
sourceMapAsset._value = rewrittenSourceMapContents;
} else {
sourceMapAsset._valueAsBuffer = Buffer.from(rewrittenSourceMapContents, 'utf-8');
}
return {
sourceFileName,
mapFileName,
sourceFileHash,
sourceMapAsset,
};
});
});
}
};
Em seguida, você pode adicionar o plugins plug-in à seção em seu webpack.config.js arquivo de configuração:
const PrepareSourceMapsForSymbolServerPlugin = require('./webpack.plugin-symbols.js');
// ...
module.exports = (env, args) => {
const mode = process.env.NODE_ENV || (env && env.NODE_ENV) || 'production';
return {
devtool: mode === 'production' ? 'hidden-source-map' : 'inline-source-map',
resolve: {
modules: [
path.resolve('./node_modules'),
],
},
output: {
publicPath: '/',
filename: '[name].bundle.js',
chunkFilename: '[name].chunk.js',
},
plugins: [
// ... other plugins
new PrepareSourceMapsForSymbolServerPlugin(),
]
};
};
Etapa 3: Publicar mapas de origem para o servidor de símbolos do Azure Artifacts
Para publicar mapas de origem para o servidor de símbolos do Azure Artifacts, use uma das seguintes abordagens:
- Publique mapas de origem usando o Azure DevOps Pipelines.
-
Publicar mapas de origem usando
symbol.exe.
Essas abordagens são descritas abaixo.
Publicar mapas de origem usando o Azure DevOps Pipelines
O DevOps do Azure acompanha a tarefa de build do PublishSymbols@2 pipeline. Essa tarefa pode ser usada para publicar seus mapas de origem no servidor de símbolos do Azure Artifacts.
Ao configurar essa tarefa, defina o indexableFileFormats parâmetro como ou AllSourceMap.
Publicar mapas de origem usando symbol.exe
A equipe do Symbol Server publica um aplicativo .NET Core, symbol.exe, que pode ser baixado automaticamente. Para baixar symbol.exeprogramaticamente, use o GETClient método do ponto de extremidade na API REST do Serviço de Símbolos, conforme descrito em Cliente - Obter. Em seguida, execute o seguinte comando para publicar seus mapas de origem no servidor de símbolos do Azure Artifacts:
symbol publish
-d {root directory containing your source maps}
-n {a unique name for this job}
-s {service URL, such as https://artifacts.dev.azure.com/contoso}
--patAuthEnvVar {name of environment variable containing a PAT}
--indexableFileFormats SourceMap
O -n parâmetro deve ser exclusivo. Os nomes de trabalho repetidos serão rejeitados, incluindo nomes de trabalhos que falharam.