F12でChrome・Edge・Firefoxのデベロッパーツールが開くのを無効にする方法

Windows版「Google Chrome、Microsoft Edge、Firefox」のキーボードショートカット「F12」でデベロッパーツールが開くのを無効にする方法をまとめた設定解説・備忘録記事です。

ノートPCのキーボードに慣れた当サイト管理人がロジクールのキーボード『K295』を使い始めたところ、deleteキーを押すつもりでF12を押してしまうミスがブログ記事を書く際などにちょくちょく起きるようになりました。

このミスは、使用しているノートPCのdeleteキーの位置と、K295（一般的なフルサイズキーボード）のF12キーの位置が、どちらもbackspaceキーの直上にあるためです。

ウェブブラウザのデフォルト設定ではF12キーは、デベロッパーツールのショートカットになっています。そのため、ミスをする度にデベロッパーツールが開くという面倒くさい自体に。

対応策として、主に使用しているブラウザ「Google Chrome」と、サブの「Microsoft Edge 」「Firefox」でF12キーを無効にしました。

Chromeはショートカットを無効にするオプション設定がないため拡張機能で対応
EdgeとFirefoxはオプション設定でF12のショートカットを無効にできます
ブラウザ使用時のF12キーのショートカットが不要な方に

どんぱっぱ

間違ってF12キーを押すと、その度にデベロッパーツールが開いて煩わしいです😭

ノートPCのキーボード配置に慣れているせいか、書くことに集中してると無意識にF12を押してしまいます。脳回路の混線！

基本情報
Chrome
- Tampermonkeyの設定
Edge
Firefox

基本情報

PC環境、バージョン情報。

Windows 10 pro：22H2 19045.3324
Google Chrome：116.0.5845.111
Microsoft Edge：116.0.1938.62
Firefox：116.0.3

Chrome

確認時、ChromeにはF12を無効にするオプション設定がないようだった。

そこで、ウェブサイトでユーザースクリプトを実行できる拡張機能『Tampermonkey』を使ってF12を無効にした。

Tampermonkey - Chrome Web Store

Change the web at will with userscripts

Tampermonkeyは、特定のページや条件に合致するサイトで、ユーザーのオリジナルJavascriptやCSSを実行・適用できる拡張機能です。

ウェブサイトの機能や見た目を手軽にカスタマイズできます。

Tampermonkeyの設定

Tampermonkeyの基本的な使い方は、「新規スクリプトを追加」→「コードを記述＆保存」→「スクリプトを有効化」。

Tampermonkeyの拡張機能画面（ダッシュボード）。タブからも新規スクリプトを追加できる。

Tampermonkeyのエディター画面。スクリプトのコードを追加したら「ファイル」→「保存」。

追加したスクリプトは、スクリプト名の左側にあるトグルボタンでON・OFFを切り替えられる。

全サイトで無効化

F12キーを全てのサイトで無効にする場合。

// ==UserScript==
// @name         F12を全サイトで無効化
// @namespace  https://tonahazana.com/
// @version      0.1
// @description  F12キーを全てのサイトで無効にします
// @author        どんぱっぱ＠となはざな
// @match        *://*/*
// @icon         none
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...

    // F12キーを無効化
    document.onkeydown = function(e) {
        if (e.key === "F12" || e.keyCode === 123) {
            e.preventDefault();
        }
    };

})();

ヘッダー（// ==/UserScript==より上の部分）の記述で重要なのは、スクリプトを実行するウェブサイトを指定する「@match」の部分。スクリプトを配布せず私的に使う場合、他の部分の記述は空白とか適当なものでOK。

あとは、「// Your code here…」と、最下部閉じタグ「})();」の間の行にコードを書き込めばOK。

WordPress管理画面で無効化

WordPressの管理画面でのみ無効化する場合は以下。

// ==UserScript==
// @name         F12をWP管理画面で無効化
// @namespace    https://tonahazana.com/
// @version      0.1
// @description  F12キーをWordPressの管理画面でのみ無効にします
// @author       どんぱっぱ＠となはざな
// @match        *://*/wp-admin*
// @icon         none
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...

    // F12キーの無効化
    document.onkeydown = function(e) {
        if (e.key === "F12" || e.keyCode === 123) {
            e.preventDefault();
        }
    };

})();

エディター画面（投稿・固定ページの編集画面）でのみ無効にするなら@matchを以下のようにする。

// @match        *://*/wp-admin/post*

ブログ記事書いてる時にミスることが多いので、WordPressの管理画面ごとF12を無効にしています。最小限の範囲に限定ならエディター画面だけでもいいでしょう。

TampermonkeyはEdgeでも使えますし、Firefox版もあります。

@matchの書式

@matchの書式は、「<protocol>://<domain><path>」。

行を分けて複数のURLを指定することもできる。

// @match *://*/*
// @match https://*/*
// @match http://*/example*
// @match https://*.tampermonkey.net/exa*mple

参考記事

Documentation | Tampermonkey

Documentation

@match マッチパターンの書き方

ブラウザ拡張機能で対象のURLを指定するときに使うマッチパターンの書き方をメモメ...

Edge

Edgeは、設定画面からF12でデベロッパーツールが開くのを無効にできる。

「ツールバー右端の設定メニュー（…）」→「設定」→「アクセシビリティ」→「キーボード」→「F12キーを使用して開発者ツールを開きます」のトグルスイッチをオフにする。

Firefox

FirefoxにもF12でデベロッパーツール（ウェブ開発ツール）が開くのを無効にできるオプション設定がある。

「ウェブ開発ツール（『F12』『ctrl+shift+I』など）」→「画面右上の三点リーダ（…）のメニュー」→「設定」→「詳細設定」→「Use the F12 key to open or close DevTools」のチェックを外す。

設定は以上です。

デベロッパーツールは、設定メニューや「ctrl+shift+I」からも起動できるので、使用頻度が低い場合にはF12のショートカットを無効にしても支障はなさそうです。

あるいは、別のキーなり機能を割り当てるのも面白そう。