当サイトには広告が含まれます
ソフト・アプリ

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

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

3ヶ月くらい前からロジクールのキーボード『K295』を使い始めたのですが、ブログの記事を書く際などにdeleteキーを押すつもりでF12を押してしまうミスがちょくちょく起きるようになりました。

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

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

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

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

基本情報

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

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

Tampermonkeyの設定

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

Tampermonkeyのツールバーのメニュー。新規スクリプトを追加を選択。
Tampermonkeyの拡張機能画面(ダッシュボード)。タブからも新規スクリプトを追加できる。

Tampermonkeyのエディター画面。スクリプトのコードを追加したら「ファイル」→「保存」。
Tampermonkey自体を有効化。加えて、使用するスクリプトを有効化する。

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

全サイトで無効化

// ==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

参考記事

Edge

Edgeの「設定」→「アクセシビリティ」画面。

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

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

Firefox

Firefoxの「ウェブ開発ツール」設定画面。

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

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

設定は以上です。

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

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

コメントの通知/購読設定
受け取る通知
guest
0 Comments
Inline Feedbacks
View all comments
タイトルとURLをコピーしました