যে কোন পেজের গঠন ও লেআউট পরীক্ষা বা সংস্কারের জন্য ইন্সপেক্টর ব্যবহার করুন।
ইন্সপেক্টর ওপেন করা
ইন্সপেক্টর ওপেন করার বেশ কিছু উপায় আছেঃ
- 'ওয়েব ডেভলপার' মেনু থেকে 'ইন্সপেক্টর' অপশনটি choose করুন (Mac এর 'টূলস্' মেনুতে এটি একটি সাবমেনু)
- Ctrl-Shift-C চাপুন (ম্যাক OS X ও লিনাক্সে Cmd-Option-C )
- ওয়েব পেজের যে কোন একটি এলিমেন্টে রাইট-ক্লিক করুন এবং 'ইন্সপেক্ট এলিমেন্ট' সিলেক্ট করুন
ইন্সপক্টর এক্টিভেট করার সাথে সাথে ব্রাউজার উইন্ডোর উপরে Toolbox দেখা যাবে।
আপনি যদি 'ইন্সপেক্টর এলিমেন্ট' এ ক্লিক করে ইন্সপেক্টর invoke করে থাকেন তাহলে এলিমেন্ট এরই মধ্যে সিলেক্ট হয়ে থাকবে এবং ইন্সপেক্টরটি নিম্নবণিতভাবে কাজ করবে যেভাবে এটি 'সিলেক্টিং এলিমেন্টস্' এ কাজ করে।
যদি তা না হয়ে থাকে তাহলে আপনি যখন আপনার মাউস পেজটিতে ঘুরাবেন তখন মাউসের নিচের এলিমেন্ট dotted বডার দিয়ে হাইলাইট হয়ে যাবে এবং একটি অ্যানোটেশন এটির HTML ট্যাগ ডিসপ্লে করবে। একই সাথে, এর HTML ডেফিনেশনও ইন্সপেক্টরের বাঁ দিকের pane কন্টেক্সটে ডিসপ্লে হয়ে যাবে।
এলিমেন্টের উপর ক্লিক করলে তা সিলেক্ট হয়ঃ আপনি একটি এলিমেন্ট সিলেক্ট করে থাকলে ইন্সপেক্টরটি নিচের মত দেখাবে ও কাজ করবে সেভাবে যেভাবে তা নিচের "সিলেক্টিং এলিমেন্টস্" এ কাজ কড়ে।
এলিমেন্ট সিলেক্ট করা
যখন একটি এলিমেন্ট সিলেক্ট করা হয় তখন তার মার্কআপ ইন্সপেক্টরের বাঁ দিকে HTML paneএ হায়লাইট হয়ে যায় এবং ইন্সপেক্টরের ডান CSS pane এর স্টাইল ইনফরমেশন শো করেঃ
এভাবেই এলিমেন্ট সিলেকশনের বিভিন্ন কাজ উল্লেখযোগ্যভাবে পরিবর্তিত হ্য ফায়ারফক্স 29এ।
ফায়ারফক্স 29 এর আগে
আপনি যখন একবার কোন পেজে একটি এলিমেন্টে ক্লিক করে এটি সিলেক্ট করেন তখনই ইন্সপেক্টর'স ডিসপ্লে সেই এলিমেন্টে লক হয়ে যায়। সেজন্য আপনি অন্য কোন ইন্সপেক্টর না চালু করেই মাউস ঘোরাতে পারেন।
এলিমেন্টের জন্য নির্ধারিত annotationটির ডানদিকে ও বাঁদিকে একটি করে বাটন থাকে। বাঁ দিকের বাটনটি আপনাকে নতুন এলিমেন্ট সিলেক্ট করার সুযোগ দিয়ে পুরনো এলিমেন্ট আনলক করে। ডানদিকের বাটনটি এলিমেন্টটির জন্য একটি পপআপ মেনু ডিসপ্লে করে।
ফায়ারফক্স 29 ও তার পর
ফায়ারফক্স 29 থেকে পেজের কোন এলিমেন্টের সিলেক্ট করলে এর চারদিকের ডট দেওয়া বর্ডার এবং এর জন্য নির্ধারিত অনোটেশন দেখানো হয় না। এমনকি এলিমেন্ট সিলেক্ট করার সাথে সাথে ইন্সপেক্টরগুলোও লক হয়ে যায় না। আপনি যখন মারকাপ পেন এর চারদিকে মাউসটি মুভ করেন তখন কোরেস্পন্ডিঙ এলিমেন্টের চারদিকে ডট দেওয়া বর্ডার দেখা জায়।অয়েব পেজের কোন ভিনণ এলিমেন্ট সিলেক্ট করার জন্য "Select element" বাটনটি ক্লিক করুন, যা এখন Toolbox toolbar দেখা যায়ঃ
এলিমেন্ট পপআপমেনু
ফায়ারফক্স 29 থেকে পরবর্তীতে ওয়েব পেজের অটোনেশন আর দেখা জায় না। তাই শুধুমাত্র HTML পেন এ কনট্যাক্স-ক্লিকিন এর মাধ্যমে পপআপ মেনু ওপেন করতে পারেন
পপআপ মেনু ব্যবহার করে আপনি যে কোন নির্দিষ্ট ক্ষেত্রে বেশ কিছু সাধারণ কাজ করতে পাড়েন। আপনি দুইভাবে মেনুটি এক্টিভেট করতে পারেনঃ
- ওয়েব পেজের এলিমেন্টে সংযুক্ত অ্যানোটেশনের ডানদিকের বাটনে ক্লিক করুনঃ
- কন্টেক্সট - HTML pane র এলিমেন্টে ক্লিক করুনঃ
মেনুটি আপনাকে যা যা করতে সুযোগ দেয়ঃ
- এলিমেন্টের HTML এডিট করা (শুধুমাত্র ফায়ারফক্স 27 থেকে পরবর্তী)
- ইনার অথবা আউটার HTML কপি করা
- CSS সিলেক্টর কপি করা যা নিজে থেকে এলিমেন্ট সিলএক্ট করে
- এলিমেন্ট ডিলেট করা
- :hover, :focus এবং :active CSS সিউডো-ক্লাসগুলো সেট করা
ডাটা URL হিসাবে ইমেজ কপি করা
ডাটা URL হিসাবে কপি করা ফায়ারফক্স 29এ নতুন।
ফায়ারফক্স 29 থেকে পরবর্তীতে, যদি currently selected এলিমেন্টটি কোন ইমেজ হয় তাহলে পপআপ মেনুতে একটি অপশন থাকে ডাটা ইউ আর এল হিসাবে ক্লিপবোর্ডে ইমেজ কপি করার জন্যঃ
HTML এডিট করা
HTML এডিট করা শুধুমাত্র ফায়ারফক্স 27 এই সহজলভ্য।
কোন এলিমেন্টের আউটারHTML এডিট করার জন্য এলিমেন্টের পপআপ মেনু এক্টিভেট করে সিলেক্ট করুন "Edit As HTML"। আপনি HTML paneএ একটি টেক্সট-বক্স দেখবেনঃ
আপনি যে কোন HTML এখানে সংযোগ করতে পারবেনঃ এলিমেন্টের ট্যাগ পরিবর্তন করা, existing এলিমেন্ট পরিবর্তন করা আথবা নতুন কোন এলিমেন্ট সংযোগ করা। বক্সের বাইরে ক্লিক করার সাথে সাথে আপনার করা পরিবর্তনগুলো পেজটিতে অ্যাপ্লাই হয়ে যাবে।
HTML পেন
HTML পেন আপনাকে পেজটির HTML একটি গাছের আকারে দেখায় এটির শাখাগুলো collapsible. নির্ধারিত এলিমেন্টগুলোর শুরুর এবং শেষের ট্যাগগুলো ধূসর পটভূমিতে হাইলাইট করা হয়।
আপনি এই পেনে সরাসরি এডিট করতে পারেন - বিভিন্ন ট্যাগ, অ্যাট্রিবিউটস এবং কন্টেন্টসঃ আপনি যেই এলিমেন্ট এডিট করতে চান তা পরিবর্তন করুন এবং পরিবর্তনগুলো সাথে সাথে দেখতে Enter ক্লিক করুন।
কোন এলিমেন্টে কন্টেক্স-কিল্ক করলে তা ডিসপ্লে করে একটি পপআপ মেনু সেই এলিমেন্টে কাজ করার জন্য।
HTML পেন টুলবার
এই পেইন টির উপরে একটি ডেডিকেটেড টুলবার তিনটি অংশে ভাগ হয়ে আছেঃ
ফায়ারফক্স 29 থেকে পরবর্তীতে "Select element" বাটনটি Toolbox এ মুভ করা হয়েছে।
- এলিমেন্ট সিলেক্ট করাঃ এই বাটনটি ক্লিক করলে,আপনি ব্রাউজার উইন্ডোতে শুধুমাত্র মাউস ঘুরিয়ে বিভিন্ন এলিমেন্ট সিলেক্ট করতে পারবেন।
- HTML ব্রেড ক্রাম্বস্ঃ যেই ব্রাঞ্চের আওতায় নির্ধারিত এলিমেন্টটি আছে তার সমস্ত hierarchy এটি দেখায়। আপনি যদি বারে কোন এলিমেন্ট ক্লিক করে ধরে থাকেন তাহলে একটি পপআপ মেনু দেখা যাবে যা আপনাকে একটি এলিমেন্টের অংশ সিলেক্ট করার সুযোগ দেয়। বারের বামদিকের ও ডানদিকের শেষের কোণার ছোট তীর চিহ্ণিত আইকনটি ক্লিক করলে সেটি বারটিকে স্ক্রল করবে যদি সেটি স্ক্রিনের থেকেও বড় হয়ে থাকে।
- ট্যাগ খোঁজাঃ আপনি যে ট্যাগের জন্য টাইপ করেন তা খুঁজুন এখানে। "Enter" প্রেস করে পরবর্তী অকারেন্স খুঁজে পাবেন।
CSS পেন
CSS পেন কারেন্টলি সিলেক্টেড এলিমেন্টে ব্যবহৃত স্টাইলের তথ্য প্রদর্শন করে। চারটি ভিন্ন ভিন্ন ভিউ আছে এখানেঃ "রুলস্", "কম্পিউটেড", "ফন্টস" এবং "বক্স মডেল"। পেনের সর্ব উপরের টুলবারটি ব্যবহার করে আপনি তাদের মধ্যে সুইচ করতে পারেনঃ
রুলস্ ভিউ
নির্ধারিত এলিমেন্টে ব্যবহৃত সব রুলস তালিকাবদ্ধ রাখে এই ভিউটি, বিশেষায়িত এর হ্রাসক্রম ভিত্তিতেঃ
রুলস ভিউ সিউডো-এলিমেন্টস এবং ব্যবহৃত রুলস তালিকাবদ্ধ করে।
রুল ডিসপ্লে
এটি একটি স্টাইলশীটে প্রত্যেকটি রুল ডিসপ্লে করে, সেক্টর এর একটি লিস্টসহ property:value; ডিকলারেশনের লিস্ট ও থাকে।
যেসব রুল অন্য রুলের বিপক্ষে যায় সেগুলো কেটে দেওয়া হয়েছে। কোন নির্দেশনার উপরে মাউস রাখলে এটির নিচে একটি চেকবক্স দেখা যাবেঃকোন রুল চালু বা বন্ধ করতে আপনি এটি ব্যবহার করতে পারেন।
CSS ফাইলের লিঙ্ক
প্রতিটি রুলের উপরে ডান দিকে ফাইলনেম সোর্স এবং লাইন নাম্বার লিঙ্ক হিসাবে দেখানো হয়ঃ ক্লিক করলে স্টাইল এডিটর থেকে এটি ওপেন হয়ে যাবে।
ফায়ারফক্স 29 থেকে পরবর্তীতে ইন্সপেক্টর CSS সোর্স ম্যাপ বোঝে। এর মানে হল আপনি যদি CSS প্রিপ্রসেসর ব্যবহার করেন যার সোর্স ম্যাপ সাপোর্ট আছে এবং তা আপনি স্টাইল এডিটর সেটিং এ সক্রিয় করেছেন তাহলে লিঙ্কটি আপনাকে প্রকৃত সোরসে নিয়ে যাবে, জেনারেটেড CSS নয়ঃ
CSS সোর্স ম্যাপ সাপোর্ট সম্পর্কে আরো জানুন স্টাইল এডিটর ডকুমেন্টেশন এ।
রঙ নমুনা
ফায়ারফক্স 27 থেকে পরবর্তীতে, আপনি কালার ভেল্যুর পরে দৃশ্যমান একটি রঙ নমুনা দেখতে পাবেনঃ
কালার পিকার
ফায়ারফক্স 28 থেকে পরবর্তীতে, আপনি রঙ নমুনাতে (color sample) ক্লিক করলে রঙ পরিবর্তন করার জন্য একটি কালার পিকার দেখতে পাবেনঃ
পটভূমি-দৃশ্য পূর্ব পরিদর্শন
ফায়ারফক্স 27 থেকে পরবর্তীতে, রুলের উপর মাউস ঘোরালে আপনি ব্যাকগ্রাউন্ড-ইমেজ বা পটভূমি-দৃশ্য নামে বিভিন্ন ইমেজের বিশেষ ব্যবহৃত একটি প্রিভিউ দেখতে পাবেনঃ
ভিজুয়ালাইজেশন পরিবর্তন
ফায়ারফক্স 29এ এটি নতুন।
ফায়ারফক্স 29 থেকে পরবর্তী ক্ষেত্রে আপনি রুলস রিভিউতে কোন ট্রান্সফরম প্রপার্টিতে হোভার করলে,আপনি একটি টুলটিপ পাবেন যা আপনাকে দেখাবে এটি যা যা পরিবর্তন করে।
এডিট করার নিয়মাবলী
আপনি যদি কোন দিক্লারেশ্নে ক্লিক করেন তবে আপনি তার বৈশিষ্ট্যাবলী বা মান সংস্কার করতে পারবেন এবং সাথে সাথেই তা দেখতে পাবেন। একটি রুলে নতুন ডিকলারেশন যুক্ত করার জন্য ক্লিক করুন রুলের সর্বশেষ লাইনটিতে (শেষ বন্ধনী দিয়ে অধিকৃত লাইনটি)। সংস্কার করার সময় যদি আপনি অপ্রচলিত মান বা কোন অজানা বৈশিষ্টের নাম প্রবেশ করান, তবে ডিকলারেশনের নিচে একটি হলুদ সতর্ক সংকেত দেখা যাবে।
আপনার করা যে কোন পরিবর্তনই ক্ষণস্থায়ীঃ পেজটি পুনরায় লোড করলে প্রকৃত স্টাইল রিস্টোর হয়ে যাবে।
Tip: You can use the arrow keys to increase/decrease numeric rules while editing. Up arrow will turn "1px" to 2px, and Shift+up/down will increment by 10. Alt+up/down change values by 0.1, and shift+Page up/down will add or subtract 100 from the value.
কম্পিউটেড ভিউ
This view organizes the style of the element by property. It lists all CSS properties which have been applied to this element in alphabetical order: it shows the calculated value that each CSS property has for for the selected element:
Clicking the arrow next to the property name shows the rule that set this value, along with a link to the source filename and line number:
By default, it only shows values that have been explicitly set by the page: to see all values, click the "Browser styles" box.
Typing in the search box performs a live filtering of the list, so, for example, if you just want to see font-related settings, you can type "font" in the search box, and only properties with "font" in the name will be listed. You can also search for the values of properties: to find the rule responsible for setting the font to "Lucida Grande", type that in the search box.
ফন্টস্ ভিউ
সিলেক্টেড এলিমেন্ট অনুযায়ী প্রয়োজনীয় সব ফন্ট দেখায় এটি। মনে রাখবেন, আপনি আপনার সিস্টেমে যে ফন্ট ব্যবহার করেন তাও দেখায় এটি, css এ যে ফন্ট নির্ধারণ করা আছে, তার থেকে এটি আলাদা হতে পারেঃ
ফন্ট ভিউতে টেক্সট ভিউ হল "Abc" ডিফল্ট অনুসারে কিন্তু আসলে এটি একটি টেক্সট এরিয়া যা পড়্যোজন মত পরিবর্তন করা যেতে পারে।
বক্স মডেল ভিউ
নির্দিষ্ট এই এলিমেন্টে অ্যাপ্লাই করলে এটি বক্স মডেল এর একটি গ্রাফিকাল representation দেখায়ঃ
- At the top-left is the total space taken by the element on the page.
- The outside numbers tell you the margin size on each side of the element.
- The numbers in squares on the borders tell you how wide each side's border is.
- The next layer in shows the padding size on each side of the element.
- Finally, in the center, is the size of the element's content.
ওয়েব কনসোল এর সাহায্যে পেজ ইন্সপেক্টর ব্যবহার করা
ওয়েব কনসোলকে আপনি পেজ ইন্সপেক্টর হিসাবেও ব্যবহার করতে পারেন। এমনকি আপনি একটি বোনাস ফিচার ও পIবেন! আপনি যদি পেজ ইন্সপেক্টরে কোন এলিমেন্ট সিলেক্ট করে থাকেন তবে তাও variable $0. ব্যবহার করে ওয়েব কনসোলের জাভাস্ক্রিপ্টে পাঠানো যাবে।
ডেভলপার API
ফায়ারফক্স এডঅনস্ এই কন্টেক্স chrome://browser/content/devtools/inspector/inspector.xul থেকে নিচের বিভিন্ন অবযেক্টে প্রবেশ করতে পারেঃ
উইন্ডো.ইন্সপেক্টর
ইন্সপেক্টর-পেনেল.js এ আলোচিত। বিভিন্ন এট্রিবিউটস্ এবং ফানশনঃ
- .নির্ধারণ - ইন্সপেক্টর সেকশন সম্পর্কিত তথ্যঃ
- .isNode() - returns true if selection is node.
- .node - returns the actual element from the page
- .window - the window object of the frame the selection is in.
- .markDirty() - marks that the page has been changed by the inspector - a warning will be shown when leaving the page, since changes made through the inspector are rewritten on reload.
Bindable events using on:
মার্কআপ লোডেড
বামদিকের পেনেল রিফ্রেশ করার পর যখন পেজ পরিবর্তন কার হয় তখন এর প্রয়োজন হয়।
ready
প্রথম মার্কআপ লোডে দরকার হয়।
সিউডোক্লাস
Called after toggle of a pseudoclass.
লে-আউট পরিবর্তন
"paint and resize এর মত কম গুরুত্বপূর্ণ পরিবর্তন ইভেন্ট।"
কীবোর্ড শর্টকাটস
| Command | Windows | macOS | Linux |
|---|---|---|---|
| Inspect Element | Ctrl + Shift + C | Cmd + Shift + C | Ctrl + Shift + C |
Node picker
These shortcuts work while the node picker is active.
| Command | Windows | macOS | Linux |
|---|---|---|---|
| Select the element under the mouse and cancel picker mode | Click | Click | Click |
| Select the element under the mouse and stay in picker mode | Shift+Click | Shift+Click | Shift+Click |
HTML pane
These shortcuts work while you're in the Inspector's HTML pane.
| Command | Windows | macOS | Linux |
|---|---|---|---|
| Delete the selected node | Delete | Delete | Delete |
| Undo delete of a node | Ctrl + Z | Cmd + Z | Ctrl + Z |
| Redo delete of a node | Ctrl + Shift + Z / Ctrl + Y | Cmd + Shift + Z / Cmd + Y | Ctrl + Shift + Z / Ctrl + Y |
| Move to next node (expanded nodes only) | Down arrow | Down arrow | Down arrow |
| Move to previous node | Up arrow | Up arrow | Up arrow |
| Move to first node in the tree. | Home | Home | Home |
| Move to last node in the tree. | End | End | End |
| Expand currently selected node | Right arrow | Right arrow | Right arrow |
| Collapse currently selected node | Left arrow | Left arrow | Left arrow |
| (When a node is selected) move inside the node so you can start stepping through attributes. | Enter | Return | Enter |
| Step forward through the attributes of a node | Tab | Tab | Tab |
| Step backward through the attributes of a node | Shift + Tab | Shift + Tab | Shift + Tab |
| (When an attribute is selected) start editing the attribute | Enter | Return | Enter |
| Hide/show the selected node | H | H | H |
| Focus on the search box in the HTML pane | Ctrl + F | Cmd + F | Ctrl + F |
| Edit as HTML | F2 | F2 | F2 |
| Stop editing HTML | F2 / Ctrl +Enter | F2 / Cmd + Return | F2 / Ctrl + Enter |
| Copy the selected node's outer HTML | Ctrl + C | Cmd + C | Ctrl + C |
| Scroll the selected node into view | S | S | S |
| Find the next match in the markup, when searching is active | Enter | Return | Enter |
| Find the previous match in the markup, when searching is active | Shift + Enter | Shift + Return | Shift + Enter |
Breadcrumbs bar
These shortcuts work when the breadcrumbs bar is focused.
| Command | Windows | macOS | Linux |
|---|---|---|---|
| Move to the previous element in the breadcrumbs bar | Left arrow | Left arrow | Left arrow |
| Move to the next element in the breadcrumbs bar | Right arrow | Right arrow | Right arrow |
| Focus the HTML pane | Shift + Tab | Shift + Tab | Shift + Tab |
| Focus the CSS pane | Tab | Tab | Tab |
CSS pane
These shortcuts work when you're in the Inspector's CSS pane.
| Command | Windows | macOS | Linux |
|---|---|---|---|
| Focus on the search box in the CSS pane | Ctrl + F | Cmd + F | Ctrl + F |
| Clear search box content (only when the search box is focused, and content has been entered) | Esc | Esc | Esc |
| Step forward through properties and values | Tab | Tab | Tab |
| Step backward through properties and values | Shift + Tab | Shift + Tab | Shift + Tab |
| Start editing property or value (Rules view only, when a property or value is selected, but not already being edited) | Enter or Space | Return or Space | Enter or Space |
| Cycle up and down through auto-complete suggestions (Rules view only, when a property or value is being edited) | Up arrow , Down arrow | Up arrow , Down arrow | Up arrow , Down arrow |
| Choose current auto-complete suggestion (Rules view only, when a property or value is being edited) | Enter or Tab | Return or Tab | Enter or Tab |
| Increment selected value by 1 | Up arrow | Up arrow | Up arrow |
| Decrement selected value by 1 | Down arrow | Down arrow | Down arrow |
| Increment selected value by 100 | Shift + Page Up | Shift + Page Up | Shift + Page Up |
| Decrement selected value by 100 | Shift + Page Down | Shift + Page Down | Shift + Page Down |
| Increment selected value by 10 | Shift + Up arrow | Shift + Up arrow | Shift + Up arrow |
| Decrement selected value by 10 | Shift + Down arrow | Shift + Down arrow | Shift + Down arrow |
| Increment selected value by 0.1 | Alt + Up arrow (Ctrl + Up arrow from Firefox 60 onwards.) | Alt + Up arrow | Alt + Up arrow (Ctrl + Up arrow from Firefox 60 onwards.) |
| Decrement selected value by 0.1 | Alt + Down arrow (Ctrl + Down arrow from Firefox 60 onwards). | Alt + Down arrow | Alt + Down arrow (Ctrl + Down arrow from Firefox 60 onwards). |
| Show/hide more information about current property (Computed view only, when a property is selected) | Enter or Space | Return or Space | Enter or Space |
| Open MDN reference page about current property (Computed view only, when a property is selected) | F1 | F1 | F1 |
| Open current CSS file in Style Editor (Computed view only, when more information is shown for a property and a CSS file reference is focused). | Enter | Return | Enter |
গ্লোবাল শর্ট-কাটস
These shortcuts work in all tools that are hosted in the toolbox.
| Command | Windows | macOS | Linux |
|---|---|---|---|
| Increase font size | Ctrl + + | Cmd + + | Ctrl + + |
| Decrease font size | Ctrl + - | Cmd + - | Ctrl + - |
| Reset font size | Ctrl + 0 | Cmd + 0 | Ctrl + 0 |