Documentation 5 min read

Disable Dev Tools

developer tools

Published: April 21, 2025

Visão Geral

Disable Dev Tools é uma biblioteca JavaScript projetada para prevenir o uso de ferramentas de desenvolvedor (DevTools) no navegador. Ao detectar a abertura das DevTools, a biblioteca bloqueia o menu de contexto, desativa combinações de teclas específicas e exibe um modal informativo para o usuário, desencorajando a utilização das ferramentas de desenvolvedor.

Esta biblioteca é útil para proteger o código fonte e impedir a inspeção não autorizada de elementos da página, proporcionando uma camada adicional de segurança para aplicações web. A biblioteca inicializa automaticamente assim que o script é carregado, mas você pode desativar essa inicialização e reconfigurá-la conforme necessário.

Recursos

  • Prevenção do menu de contexto para evitar inspeção via clique direito.
  • Desativação de combinações de teclas comuns para abrir DevTools, como F12, Ctrl+Shift+I, Ctrl+Shift+J e Ctrl+Shift+C.
  • Detecção automática da abertura das DevTools através de intervalos de verificação de desempenho e dimensões da janela.
  • Exibição de um modal personalizado quando as DevTools são detectadas, informando o usuário e bloqueando interações adicionais.
  • Configurações personalizáveis para ajustar o comportamento da biblioteca conforme as necessidades do projeto, incluindo a possibilidade de personalizar o texto do modal, exibir ou ocultar backdrop e definir callbacks para eventos de detecção e fechamento das DevTools.
  • Facilidade de integração com qualquer site através de uma simples inclusão de script, com inicialização automática por padrão.

Instalação

Para instalar o Disable Dev Tools, siga os passos abaixo:

Passo a Passo
  • Inclua o script JavaScript no seu HTML antes do fechamento da tag </body>:
<script src="https://cdn.alphasystem.dev/plugins/disable-dev-tools/latest/script-min.js"></script>

A biblioteca será inicializada automaticamente assim que o script for carregado, aplicando as configurações padrão. Não é necessário realizar nenhuma configuração adicional para o funcionamento básico.

Nota: Evite instanciar a classe DisableDevTools manualmente, pois a inicialização automática já se encarrega de configurar a biblioteca. Instanciar a classe manualmente pode causar conflitos ou comportamentos inesperados. Se desejar personalizar a configuração imediatamente após o carregamento, você pode chamar o método disable() seguido de init() com suas preferências.

Referência da API

O Disable Dev Tools expõe os métodos init e disable para permitir personalizações e controle sobre o comportamento da biblioteca.

Método: init

Inicializa a biblioteca com opções personalizadas. Este método é chamado automaticamente durante a carga do script, mas pode ser chamado manualmente para reconfigurar ou reinicializar a biblioteca.

Assinatura

init(options?: Object) : void

Parâmetros

  • options (opcional): Object - Objeto contendo as opções de configuração para personalizar o comportamento da biblioteca.

Opções de Configuração

  • preventContextMenu (boolean, padrão: true): Previne o menu de contexto (clique direito).
  • preventKeys (boolean, padrão: true): Desativa combinações de teclas específicas para abrir DevTools.
  • detectDevTools (boolean, padrão: true): Ativa a detecção automática da abertura das DevTools.
  • detectionThreshold (number, padrão: 150): Tempo em milissegundos para detectar a abertura das DevTools com base no desempenho.
  • detectionInterval (number, padrão: 1000): Intervalo em milissegundos entre as verificações de detecção das DevTools.
  • modalMessage (string, padrão: "Developer tools detected! Please close them to continue."): Mensagem exibida no modal quando as DevTools são detectadas.
  • onDetected (function, padrão: null): Callback acionado quando as DevTools são detectadas.
  • onClosed (function, padrão: null): Callback acionado quando as DevTools são fechadas.
  • useBackdrop (boolean, padrão: true): Exibe um backdrop atrás do modal.
  • modalStyles (object, padrão: {}): Objeto com propriedades CSS para personalizar o estilo do modal.

Exemplo de Uso

// Inicializar a biblioteca com opções personalizadas
DisableDevTools.init({
  preventContextMenu: false, // Permitir o menu de contexto
  detectDevTools: true, // Ativar detecção de DevTools
  modalMessage: "Por favor, feche as ferramentas de desenvolvedor.",
  onDetected: () => {
    console.log("DevTools foram abertas!");
  },
  onClosed: () => {
    console.log("DevTools foram fechadas!");
  },
  useBackdrop: true,
  modalStyles: {
    backgroundColor: "#222",
    color: "#fff",
    fontSize: "16px"
  }
});

Método: disable

Desabilita todas as funcionalidades da biblioteca, removendo event listeners, intervalos de detecção, modais e backdrops.

Assinatura

disable() : void

Exemplo de Uso

// Desabilitar a biblioteca
DisableDevTools.disable();

Exemplos de Uso

Inicialização Automática

<script src="https://cdn.alphasystem.dev/plugins/disable-dev-tools/latest/script-min.js"></script>

A biblioteca será inicializada automaticamente com as configurações padrão.

Inicialização Manual com Configurações Personalizadas

<script src="https://cdn.alphasystem.dev/plugins/disable-dev-tools/latest/script-min.js"></script>
<script>
  // Desabilitar a inicialização automática
  DisableDevTools.disable();

  // Inicializar a biblioteca com configurações personalizadas
  DisableDevTools.init({
    preventContextMenu: false,
    preventKeys: true,
    detectDevTools: true,
    detectionThreshold: 200,
    detectionInterval: 1500,
    modalMessage: "DevTools encontradas! Feche-as, por favor.",
    onDetected: () => {
      alert("As ferramentas de desenvolvedor foram abertas.");
    },
    onClosed: () => {
      alert("As ferramentas de desenvolvedor foram fechadas.");
    },
    useBackdrop: false,
    modalStyles: {
      backgroundColor: "blue"
    }
  });
</script>

Este exemplo desabilita a inicialização automática e reinicializa a biblioteca com configurações personalizadas, incluindo callbacks, estilos e mensagem customizada.

Solução de Problemas

Se você encontrar problemas ao usar o Disable Dev Tools, considere as seguintes etapas de solução de problemas:

  • As DevTools ainda podem ser abertas: Verifique se a biblioteca está corretamente incluída no HTML e se não há conflitos com outros scripts que possam estar reativando as DevTools.
  • O modal não aparece quando as DevTools são abertas: Assegure-se de que o estilo do modal não está sendo sobrescrito por outros estilos CSS e que o elemento body está acessível para a inserção do modal. Caso queira ajustar estilos do modal, utilize a opção modalStyles.
  • Desejo personalizar o conteúdo do modal: Utilize a opção modalMessage para alterar o texto exibido. Para ajustes avançados, recorra a modalStyles ou modifique o código-fonte.
  • Quero reativar a funcionalidade após desabilitar: Chame o método init novamente com as configurações desejadas após usar disable(). Caso deseje configurar a biblioteca antes de ser carregada, inclua o script, chame disable() logo em seguida e então reconfigure com init().