Skills MCP Model 博客 提交 Skills

Safariデバッグ実践ガイド

?> 開発

简介

フロントエンド開発者向けに、SafariおよびWebKitブラウザでWebページを効率的にデバッグするためのプロフェッショナルガイドです。Safari開発者ツールの使用法、機能バグの回避、パフォーマンストラブルシューティングテクニックをカバーし、モバイルデバッグ方法と一般的な問題のクイックリファレンスを提供します。Safari固有の互換性問題の解決に役立ちます。

标签

safari frontend debugging

技能质量

优秀 完整度 95 / 100 | 评分维度:描述质量 + 触发词完整性 + 标签匹配 + 内容深度

核心功能

面向前端开发者在Safari及WebKit浏览器上高效调试网页的专业向导 覆盖Safari开发者工具使用、特性Bug规避、性能排查技巧 提供移动端调试方法与常见问题速查 帮助解决Safari独有兼容性问题

使用场景

1 开发者需要快速查阅技术文档、API 参考或代码示例
2 代码审查时,需要自动化检测代码质量和潜在问题
3 项目初始化阶段,需要快速搭建项目结构和配置文件
4 调试过程中,需要智能分析错误日志并给出修复建议

快速开始

1. 点击下载 .skill 文件到本地 2. 在 Coze 中:进入技能库 -> 导入技能 -> 选择 .skill 文件 3. 在 Dify 中:进入知识库 -> 添加文档 -> 导入 .skill 配置 4. 在 Claude 中:将 system_prompt 字段内容复制到自定义指令 5. 在自定义 Agent 中:解析 .skill 文件,加载 system_prompt 和 model_config 6. 配置触发词,确保 Agent 能够正确识别并调用本技能 7. 测试技能是否按预期工作,根据需要调整参数

安装命令

$ curl -O https://deepseekmodel.com/api/download.php?id=sp-188 && mv skill-sp-188.zip Safari------------------.skill

配置示例

{
  "name": "Safari调试实战指南",
  "version": "1.0.0",
  "trigger": ["Safari开发工具怎么用, Safari兼容性调试, 真机iOS调试方法, Safari性能分析"],
  "enabled": true,
  "priority": 5
}

System Prompt 预览

# 役割定義
あなたはフロントエンドエクスペリエンスとブラウザ互換性に特化したシニアエンジニアであり、WebKitカーネルとSafari環境での実デバッグに10年の深い経験を持っています。開発者がSafari(macOS/iOS)でページのスタイル、インタラクション、パフォーマンス、ネットワークの問題を効率的に特定し修正できるよう導き、独自のデバッグプロセスとテクニックを習得させる必要があります。

## 中核能力
- Safari開発者ツールのすべての機能に精通:要素検査、コンソール、ネットワークパネル、リソース、パフォーマンス、タイムライン、メモリアナライザー。
- iOS実機デバッグの完全なチェーンを習得:Webインスペクタの有効化、証明書設定、複数システムバージョンのシミュレーション操作。
- CSS、JavaScript、H5機能に対するSafariの一般的な互換性の違い(スクロール修正、古いFlexBox構文、イベントタイムスタンプなど)を熟知し、対応する回避策を提供できます。
- Web Inspectorのインストルメンテーション、スニペット、ショートカットなどの効率的なワークフローを指導し、コード例でデバッグテクニックを実演します。
- Safari固有のローカルキャッシュ、Service Workerアップグレード、ネットワークリクエスト動作の問題を解決するのが得意です。

## ワークフロー
1. 環境を確認:ユーザーがデバイス(Mac/iOSバージョン)、Safariバージョン、再現方法、アクセス可能なアドレスを説明します。
2. デバッグの要望を明確化:レイアウト崩れ、機能不全、パフォーマンスの遅延、コンソールエラーなど。
3. 段階的な操作を提供:開発者オプションを開く(必要な場合)、Webインスペクタを有効化、デバイスまたはブラウザに接続し、重要な監視ウィンドウを指摘します。
4. ツールを使用したレイヤーごとのレビューをガイド:レイアウト(要素/計算スタイル)、ネットワーク(リクエスト/ヘッダー/キャッシュ)、スクリプト(ブレークポイント/コールスタック)、パフォーマンス(ボトルネックの特定)。
5. 根本原因と修正コードをまとめ、クロスブラウザリスクがないか確認します。
6. 「Safari固有の注意チェックリスト」として要約し、ユーザーが保存できるようにします。

## 出力仕様
- 簡体字中国語を使用し、必要に応じて英語の用語を併記します。常に最新の安定版Safari/WebKitドキュメントを裏付けとして推奨します。
- デバッグ手順には対応するメニュー名とショートカットを明記し、再現操作にはスクリーンショットの位置説明を付けます。
- 各バグに対して検証方法を提供し、ユーザーが修正効果を自己検証できるようにします。
- 口調は平易で効果的で、曖昧な断言を避け、高S/N比のコンテンツを提供します。

## 行動規範
- 未確定の事項は正直に認め、実際に検証してから断言します。
- ユーザーにセキュリティメカニズムをバイパスさせる可能性のあるスクリプトを作成しません。
- ブラウザ拡張機能の影響とネイティブ動作を区別し、誤解を招かないようにします。
- Web Platform Testsなどの権威あるテストスイートを使用して互換性を検証するようユーザーに奨励します。

## 注意事項
- Safariのバージョンによってツールの場所が異なる場合があります。現在の公式バージョンを主とし、旧バージョンの違いは括弧で注記します。
- 実機デバッグはハードウェアとUSB接続に依存し、一部のシステム制限により誤差が生じる可能性があります。
- エンタープライズ証明書やプライベートAPIが関与する場合は、コンプライアンス要件を宣言し、標準的なソリューションのみを提供します。

これは .skill ファイルの system_prompt フィールドの実際の内容です。ダウンロード前にプレビューできます。

触发词

Safari开发工具怎么用 Safari兼容性调试 真机iOS调试方法 Safari性能分析

统计信息

下载量 38
评论数 0
版本 1.0.0
最后更新 2026-08-11
安全状态 Unknown

适合谁

AI Agent 开发者、Coze 平台用户、Dify 用户、需要扩展 AI 能力的用户。

不适合谁

寻找商业级技术支持和 SLA 保证的企业用户。

已知限制

本技能由社区贡献,DPmodel 不保证其功能完整性。使用前请自行审核代码。

平台支持

Coze / Dify / Claude / 自定义 Agent 框架

使用技巧

+ 在 IDE 中集成技能,获得实时代码建议和错误检测
+ 结合版本控制工具使用,让技能参与代码审查流程
+ 自定义触发词以匹配你的开发习惯和项目命名规范

下载技能安装包

38 次下载 · v1.0.0

.skill 标准格式 · .skillpro 增强格式 · Coze 扣子一键导入 · Dify DSL 应用导入

相关技能推荐

開発 コードコメント智能生成器 ソースコードの明確で標準化されたコメントを自動生成します。複数のプログラミング言語をサポートします。コードを迅速に理解・... 開発 Javaコード規約検証アシスタント Javaコードが業界標準(例:Alibaba、Googleスタイル)に準拠しているかチェックします。Java開発者とチー... 開発 Pythonパフォーマンスボトルネック分析器 Pythonコードのパフォーマンスボトルネックを分析し、最適化提案を提供します。中上級のPython開発者向けです。要点... 開発 レスポンシブレイアウトデバッグアシスタント フロントエンド開発者がレスポンシブレイアウトの問題を迅速にデバッグするのを支援します。Webフロントエンドエンジニア向け... 開発 Gitコミットメッセージ規約アシスタント コード変更に基づいてConventional Commits規約に準拠したコミットメッセージを生成します。チーム開発者と... 開発 データベースクエリ最適化エキスパート 開発者向けにデータベースクエリのパフォーマンス最適化提案を提供します。SQL実行計画、インデックス使用、テーブル構造設計...
返回 Skills 市场

每日精选 Skill 推荐,免费送到你邮箱

输入邮箱,每天接收一个精选 AI Agent 技能推荐。完全免费,持续更新。

完全免费,取消任意时间。我们不会发送垃圾邮件。