aboutsummaryrefslogtreecommitdiff
path: root/files/bn/tools
diff options
context:
space:
mode:
authorRyan Johnson <rjohnson@mozilla.com>2021-04-29 16:16:42 -0700
committerGitHub <noreply@github.com>2021-04-29 16:16:42 -0700
commit95aca4b4d8fa62815d4bd412fff1a364f842814a (patch)
tree5e57661720fe9058d5c7db637e764800b50f9060 /files/bn/tools
parentee3b1c87e3c8e72ca130943eed260ad642246581 (diff)
downloadtranslated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz
translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2
translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip
remove retired locales (#699)
Diffstat (limited to 'files/bn/tools')
-rw-r--r--files/bn/tools/3d_view/index.html97
-rw-r--r--files/bn/tools/index.html187
-rw-r--r--files/bn/tools/page_inspector/index.html280
-rw-r--r--files/bn/tools/style_editor/index.html94
4 files changed, 0 insertions, 658 deletions
diff --git a/files/bn/tools/3d_view/index.html b/files/bn/tools/3d_view/index.html
deleted file mode 100644
index caab492814..0000000000
--- a/files/bn/tools/3d_view/index.html
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: ত্রিমাত্রিক দর্শন
-slug: Tools/3D_View
-translation_of: Tools/3D_View
-original_slug: Tools/ত্রিমাত্রিক_দর্শন
----
-<div>{{ToolsSidebar}}</div>
-
-<p><span id="result_box" lang="bn"><span class="hps">যখন আপনি ত্রিমাত্রিক(<span id="result_box" lang="bn"><span class="hps">3D</span></span>) দর্শন</span> বোতাম চাপ দিবেন<span class="hps">,</span><span class="hps"> পাতা</span>টি ত্রিমাত্রিক দর্শন <span class="hps">প্রক্রিয়ায় যাবে</span><span>;</span><span class="hps"> এই</span> <span class="hps">প্রক্রিয়ায় আপনি</span><span id="result_box" lang="bn"><span class="hps"> দেখতে পাবেন</span></span> আপনার পাতা <span id="result_box" lang="bn"><span class="hps">ত্রিমাত্রিক(</span></span><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps">3D)</span> <span class="hps">দৃশ্যে<span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="hps"> উপস্থাপন</span></span></span></span> করে <span id="result_box" lang="bn"><span class="hps">HTML-এর</span></span></span></span></span></span><span class="hps"> চারকোনা<span id="result_box" lang="bn"><span id="result_box" lang="bn"><span class="hps"> ঘর যা ক্রমবর্ধমান</span> <span class="atn hps">"</span><span>লম্বা</span><span>"</span> <span class="hps">হয়, যেটি </span></span></span></span><span class="hps">আপনার পৃষ্ঠা</span>কে বাইরের দিকে ঠেলে দিচ্ছে<span>।</span><span class="hps"> এই দৃশ্যে দেখা যায় আপনার বিষয়বস্তু</span><span class="hps">গুলো আরও সহজে ঘরের আকৃতিতে প্রকাশ পায়।</span></span></p>
-
-<p><img alt="" class="default internal" src="/files/3625/3dview.png"></p>
-
-<p><span id="result_box" lang="bn"><span class="hps">চেপে রেখে এবং টেনে ধরে</span><span class="hps">, বিভিন্ন কোণ থেকে দেখার জন্য আপনি</span> <span id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="hps">পৃষ্ঠার</span> <span class="hps">DOM(</span></span></span><span id="result_box" lang="bn"><span id="result_box" lang="bn"><span class="hps">Document Object Model)</span> <span class="hps">অনুক্রমের</span> </span>ত্রিমাত্রিক বর্ণনাটি <span class="hps">ঘোরাতে পারেন</span> <span class="hps">এবং</span> <span class="hps">পুনরায়</span> দ্যুতিময় করতে পারেন<span>, </span><span class="hps">এর</span> কাঠামো <span id="result_box" lang="bn"><span class="hps">ভালো</span></span>মতো <span class="hps">পরীক্ষার জন্য</span><span>।</span> <span class="hps">পর্দার আড়ালে থাকা উপাদানসমূহ দৃশ্যমান হবে</span><span class="hps">, যার ফলে আপনি দেখতে পাবেন কোথায় উপাদানগুলোর সম্পর্ক স্থাপিত হয় দৃশ্যমান উপাদান এর সাথে।</span> আপনি উপাদানে চেপে HTML সূচি অথবা Style সূচি থেকে তাদের HTML<span class="hps"> দেখতে পারেন।</span> <span class="hps">বিপরীতভাবে, আপনি breadcrumb bar(এক প্রকার পরিভ্রমণ দণ্ড) এর উপাদানগুলোতে চেপে কোন কোন উপাদান ত্রিমাত্রিক দৃশ্যে থাকবে তা নির্বাচন করতে পারবেন</span><span class="hps">।</span></span></p>
-
-<p>If you do not see the 3D button in the page inspector, it is possible that your graphics driver needs to be updated. See the <a class="link-https" href="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers" title="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers">blocklisted drivers page</a> for more information.</p>
-
-<h2 id="Controlling_the_3D_view">Controlling the 3D view</h2>
-
-<p>There are keyboard shortcuts and mouse controls available for the 3D view.</p>
-
-<table class="standard-table" style="width: auto;">
- <tbody>
- <tr>
- <td class="header">Function</td>
- <td class="header">Keyboard</td>
- <td class="header">Mouse</td>
- </tr>
- <tr>
- <td>Zoom in/out</td>
- <td>+ / -</td>
- <td>Scroll wheel up/down</td>
- </tr>
- <tr>
- <td>Rotate left/right</td>
- <td>a / d</td>
- <td>Mouse left/right</td>
- </tr>
- <tr>
- <td>Rotate up/down</td>
- <td>w / s</td>
- <td>Mouse up/down</td>
- </tr>
- <tr>
- <td>Pan left/right</td>
- <td>← / →</td>
- <td>Mouse left/right</td>
- </tr>
- <tr>
- <td>Pan up/down</td>
- <td>↑ / ↓</td>
- <td>Mouse up/down</td>
- </tr>
- <tr>
- <td>Reset zoom level</td>
- <td>0</td>
- <td>Resets the zoom level to the default</td>
- </tr>
- <tr>
- <td>Focus on selected node</td>
- <td>f</td>
- <td>Makes sure the currently selected node is visible</td>
- </tr>
- <tr>
- <td>Reset view</td>
- <td>r</td>
- <td>Resets zoom, rotation, and panning to the default</td>
- </tr>
- <tr>
- <td>Hide current node</td>
- <td>x</td>
- <td>Makes the currently selected node invisible; this can be helpful if you need to get at a node that's obscured</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Use_cases_for_the_3D_view">Use cases for the 3D view</h2>
-
-<p>There are a variety of ways the 3D view is useful:</p>
-
-<ul>
- <li>If you have broken HTML causing layout problems, looking at the 3D view can help find where you've gone wrong. Often, layout problems are caused by improper nesting of content. This can become much more obvious when looking at the 3D view and seeing where your elements are nested wrong.</li>
- <li>If content isn't displaying, you may be able to figure out why; since the 3D view lets you zoom out to see elements that are rendering outside the visible area of the page, you can find stray content this way.</li>
- <li>You can get a look at how your page is structured to see if there may be ways to optimize your layout.</li>
- <li>And, of course, it looks <strong>awesome</strong>.</li>
-</ul>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="/en/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a></li>
- <li><a href="/en/Tools/Page_Inspector/HTML_panel" title="HTML panel">HTML panel</a></li>
- <li><a href="/en/Tools/Page_Inspector/Style_panel" title="en/Tools/Page_Inspector/Style panel">Style panel</a></li>
- <li><a href="/en/Tools" title="Tools">Tools</a></li>
- <li><a class="external" href="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/" title="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/">New Developer Tools in Firefox 11 Aurora</a> (blog post)</li>
-</ul>
-
-<p>{{ languages( { "ja": "ja/Tools/Page_Inspector/3D_view", "zh-cn": "zh-cn/Tools/Page_Inspector/3D_view"} ) }}</p>
diff --git a/files/bn/tools/index.html b/files/bn/tools/index.html
deleted file mode 100644
index de2b9c61ff..0000000000
--- a/files/bn/tools/index.html
+++ /dev/null
@@ -1,187 +0,0 @@
----
-title: ফায়ারফক্স ডেভেলপার টুল
-slug: Tools
-tags:
- - NeedsReview
-translation_of: Tools
----
-<div>{{ToolsSidebar}}</div>
-
-<div class="summary"><span class="seoSummary">ডেস্কটপ এবং মোবাইলে HTML, CSS এবং জাভাস্ক্রিপ্ট পরীক্ষা, সম্পাদন এবং ডিবাগ করুন</span></div>
-
-<div class="column-container zone-callout"><a href="https://www.mozilla.org/firefox/channel/#aurora" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">ফায়ারফক্স অরোরা ইন্সটল করুন</a>
-
-<h3 id="What's_new_in_Aurora.3F" name="What's_new_in_Aurora.3F">অরোরাতে নতুন কি আছে?</h3>
-
-<p>অরোরা হচ্ছে ফায়ারফক্সের প্রিভিউ বিল্ড, যেখানে আপনি যেকোনো নতুন ফিচার সর্বসাধারণের জন্য উন্মুক্ত করার আগেই ব্যবহারের সুযোগ পাবেন। বর্তমান অরোরাতে ডেভেলপার টুলসে নিচের আপডেট সমূহ রয়েছে:</p>
-
-<ul>
- <li><a href="/en-US/docs/Tools/Storage_Inspector">স্টোরেজ ইনস্পেক্টর: একটি নতুন টূল, যেটা আপনাকে ওয়েব পেজ সমূহের স্টোর করা ডাটা সমূহ দেখতে সহায়তা করবে</a></li>
- <li><a href="/en-US/docs/Tools/Performance">পারফরম্যান্স টূল: উন্নত প্রফাইলার ইউজার ইন্টারফেস এবং ফ্রেমরেট টাইমলাইন</a></li>
- <li><a href="/en-US/docs/tools/Working_with_iframes">ফ্রেম সুইচিং: পেজের মধ্যে একটি নির্দিষ্ট iframe এ ডেভেলপার টুলসকে কেন্দ্রীভূত করতে পারবেন</a></li>
- <li><a href="/en-US/docs/Web/API/Console.table">console.table সমর্থন</a></li>
- <li><a href="/en-US/docs/Tools/Page_Inspector#Examining_event_listeners">পেজ ইনস্পেক্টরের মধ্যে এখন jQuery ইভেন্ট দেখা যায়</a></li>
- <li><a href="/en-US/docs/Tools/Adding_a_panel_to_the_toolbox">টুলবক্সে নতুন প্যানেল যুক্ত করার জন্য এক্সটেনশন এপিআই।</a></li>
-</ul>
-</div>
-
-<div class="column-container zone-callout"><a href="http://mzl.la/devtools" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">আপনার আইডিয়া শেয়ার করুন</a>
-
-<h3 id="Share_your_ideas" name="Share_your_ideas">আপনার আইডিয়া শেয়ার করুন</h3>
-
-<p>ডেভেলপার টুলসে নতুন ফিচারের জন্য অনুরোধ করুন অথবা অন্যান্য ডেভেলপারের আবেদন করা আইডিয়ার জন্য ভোট করুন।</p>
-</div>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/7307/inspector.png" style="display: block; height: 467px; margin-left: auto; margin-right: auto; width: 815px;"></p>
-
-<div class="column-container">
-<div class="column-half">
-<h2 id="Creating" name="Creating">তৈরি করা</h2>
-
-<p>ওয়েবসাইট এবং ওয়েব অ্যাপ এর জন্য অথরিং টুলস।</p>
-
-<dl>
- <dt><a href="/en-US/docs/Tools/Scratchpad">স্ক্র্যাচপ্যাড</a></dt>
- <dd>ফায়ারফক্স এর ভেতরে একটি টেক্সট এডিটর দেয়া আছে যা আপনাকে জাভাস্ক্রিপ্ট লিখতে এবং এক্সিকিউট করতে দেয়।</dd>
- <dt><a href="/en-US/docs/Tools/Style_Editor">স্টাইল এডিটর</a></dt>
- <dd>বর্তমান পেজ এর CSS স্টাইল দেখুন এবং এডিট করুন।</dd>
- <dt><a href="/en-US/docs/Tools/Shader_Editor">শেডার এডিটর</a></dt>
- <dd>WebGL এর ব্যবহার করা ফ্র্যাগমেন্ট শেডার সহ সবকিছু দেখুন এবং সম্পাদনা করুন</dd>
- <dt><a href="/en-US/docs/Tools/Web_Audio_Editor">ওয়েব অডিও এডিটর</a></dt>
- <dd>একটি অডিও কনটেক্সটে অডিও নোডের গ্রাফ পরীক্ষা করুন এবং তাদের প্যারামিটার পরিবর্তন করুন।</dd>
-</dl>
-</div>
-
-<div class="column-half">
-<h2 id="Exploring" name="Exploring">এক্সপ্লোর ও ডিবাগ করুন </h2>
-
-<p>Examine, explore, and debug websites and web apps.</p>
-
-<dl>
- <dt><a href="/en-US/docs/Tools/Web_Console">Web Console</a></dt>
- <dd>See messages logged a web page, and interact with the page using JavaScript.</dd>
- <dt>পেজ ইন্সপেক্টর</dt>
- <dd>এইচটিএমএল , সিএসএস দেখতে  এবং সম্পাদন করতে সহায়তা করে</dd>
- <dt><a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a></dt>
- <dd>Stop, step through, examine and modify the JavaScript running in a page.</dd>
- <dt><a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a></dt>
- <dd>See the network requests made when a page is loaded.</dd>
- <dt><a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a></dt>
- <dd>Inspect cookies, local storage, indexedDB and session storage present in a page.</dd>
- <dt><a href="/en-US/docs/Tools/GCLI">Developer Toolbar</a></dt>
- <dd>A command-line interface for the developer tools.</dd>
- <dt><a href="/en-US/docs/Tools/3D_View">3D View</a></dt>
- <dd>3D visualization of the page.</dd>
- <dt><a href="/en-US/docs/Tools/Eyedropper">Eyedropper</a></dt>
- <dd>Select a color from the page.</dd>
- <dt><a href="/en-US/docs/Tools/Working_with_iframes">Working with iframes</a></dt>
- <dd>How to target a particular iframe.</dd>
-</dl>
-</div>
-</div>
-
-<hr>
-<div class="column-container">
-<div class="column-half">
-<h2 id="Mobile" name="Mobile">মোবাইল</h2>
-
-<p>মোবাইল ডেভেলপ করার টুলস সমূহ.</p>
-
-<dl>
- <dt>অ্যাপ ম্যানেজার</dt>
- <dd>ফায়ারফক্স ওএস অ্যাপ ডিজাইন এবং ডেভেলপ।</dd>
- <dt><a href="/en-US/docs/Tools/WebIDE">WebIDE</a></dt>
- <dd>অ্যাাপ ম্যানেজারের প্রতিস্তাপক যা ফায়ারফক্স ৩৩ ভার্সন থেকে শুরু হয়েছে।</dd>
- <dt><a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a></dt>
- <dd>Run and debug your Firefox OS app on the desktop, without needing a real Firefox OS device.</dd>
- <dt><a href="/en-us/docs/Tools/Responsive_Design_View">Responsive Design View</a></dt>
- <dd>See how your website or app will look on different screen sizes without changing the size of your browser window.</dd>
- <dt><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">Debugging on Firefox for Android</a></dt>
- <dd>Connect the developer tools to Firefox for Android.</dd>
-</dl>
-</div>
-
-<div class="column-half">
-<h2 id="Performance" name="Performance">Performance</h2>
-
-<p>Diagnose and fix performance problems.</p>
-
-<dl>
- <dt><a href="/en-US/docs/Tools/Performance">Performance tool</a></dt>
- <dd>Revamped JS profiler and frame rate timeline.</dd>
-</dl>
-
-<dl>
- <dt><a href="/en-US/docs/Tools/Profiler">JavaScript Profiler</a></dt>
- <dd>Figure out where your JavaScript code is spending its time.</dd>
- <dt><a href="/en-US/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></dt>
- <dd>Highlights the parts of the page that are repainted in response to events.</dd>
- <dt><a href="/en-US/docs/Tools/Web_Console#Reflow_events">Reflow Event Logging</a></dt>
- <dd>See reflow events in the web console.</dd>
- <dt><a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">Network Performance</a></dt>
- <dd>See how long the parts of your site take to load.</dd>
-</dl>
-</div>
-</div>
-
-<hr>
-<div class="column-container">
-<div class="column-half">
-<h2 id="Debugging_the_browser" name="Debugging_the_browser">Debugging the browser</h2>
-
-<p>By default, the developer tools are attached to a web page or web app. But you can also connect them to the browser as a whole. This is useful for browser and add-on development.</p>
-
-<dl>
- <dt><a href="/en-US/docs/Tools/Browser_Console">Browser Console</a></dt>
- <dd>See messages logged by the browser itself and add-ons, and run JavaScript code in the browser's scope.</dd>
- <dt><a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a></dt>
- <dd>Attach the Developer Tools to the browser itself.</dd>
-</dl>
-</div>
-
-<div class="column-half">
-<h2 id="Extending_the_devtools" name="Extending_the_devtools">Extending the devtools</h2>
-
-<p>The developer tools are designed to be extensible. Firefox add-ons can access the developer tools and the components they use to extend existing tools and add new tools. With the remote debugging protocol you can implement your own debugging clients and servers, enabling you to debug websites using your own tools or to debug different targets using the Firefox tools.</p>
-
-<dl>
- <dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Remote Debugging Protocol</a></dt>
- <dd>The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.</dd>
- <dt><a href="/en-US/docs/Tools/Editor">Source Editor</a></dt>
- <dd>A code editor built into Firefox that can be embedded in your add-on.</dd>
- <dt><a href="/en-US/docs/Tools/Debugger-API">The <code>Debugger</code> Interface</a></dt>
- <dd>An API that lets JavaScript code observe the execution of other JavaScript code. The Firefox Developer Tools use this API to implement the JavaScript debugger.</dd>
- <dt><a href="/en-US/docs/Tools/Web_Console/Custom_output">Web Console custom output</a></dt>
- <dd>How to extend and customize the output of the <a href="/en-US/docs/Tools/Web_Console">Web Console</a> and the <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a>.</dd>
-</dl>
-</div>
-</div>
-
-<hr>
-<h2 id="More_resources" name="More_resources">More resources</h2>
-
-<p>This section lists resources which aren't maintained by Mozilla's developer tools team, but which are widely used by web developers. We've included a few Firefox add-ons in this list, but for the complete list see the <a href="https://addons.mozilla.org/en-US/firefox/extensions/web-development/">“Web Development” category on addons.mozilla.org</a>.</p>
-
-<div class="column-container">
-<div class="column-half">
-<dl>
- <dt><a href="https://www.getfirebug.com/">Firebug</a></dt>
- <dd>A very popular and powerful web development tool, including a JavaScript debugger, HTML and CSS viewer and editor, and network monitor.</dd>
- <dt><a href="/en-US/docs/DOM_Inspector">DOM Inspector</a></dt>
- <dd>Inspect, browse, and edit the DOM of web pages or XUL windows.</dd>
- <dt><a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer</a></dt>
- <dd>Adds a menu and a toolbar to the browser with various web developer tools.</dd>
-</dl>
-</div>
-
-<div class="column-half">
-<dl>
- <dt><a href="https://webmaker.org/en-US/tools/">Webmaker Tools</a></dt>
- <dd>A set of tools developed by Mozilla, aimed at people getting started with Web development.</dd>
- <dt><a href="http://www.w3.org/Status.html">W3C Validators</a></dt>
- <dd>The W3C website hosts a number of tools to check the validity of your website, including its <a href="http://validator.w3.org/" title="http://validator.w3.org/">HTML</a> and <a href="http://jigsaw.w3.org/css-validator/" title="http://jigsaw.w3.org/css-validator/">CSS</a>.</dd>
- <dt><a href="http://www.jshint.com/">JSHint</a></dt>
- <dd>JavaScript code analysis tool.</dd>
-</dl>
-</div>
-</div>
diff --git a/files/bn/tools/page_inspector/index.html b/files/bn/tools/page_inspector/index.html
deleted file mode 100644
index b434eaea59..0000000000
--- a/files/bn/tools/page_inspector/index.html
+++ /dev/null
@@ -1,280 +0,0 @@
----
-title: পেজ ইন্সপেক্টর
-slug: Tools/Page_Inspector
-translation_of: Tools/Page_Inspector
----
-<div>{{ToolsSidebar}}</div><p>যে কোন পেজের গঠন ও লেআউট পরীক্ষা বা সংস্কারের জন্য ইন্সপেক্টর ব্যবহার করুন। </p>
-
-<h2 id="ইন্সপেক্টর_ওপেন_করা">ইন্সপেক্টর ওপেন করা</h2>
-
-<p>ইন্সপেক্টর ওপেন করার বেশ কিছু উপায় আছেঃ</p>
-
-<ul>
- <li>'ওয়েব ডেভলপার' মেনু থেকে 'ইন্সপেক্টর' অপশনটি choose করুন (Mac এর 'টূলস্' মেনুতে এটি একটি সাবমেনু)</li>
- <li>Ctrl-Shift-C চাপুন (ম্যাক OS X ও লিনাক্সে Cmd-Option-C )</li>
- <li>ওয়েব পেজের যে কোন একটি এলিমেন্টে রাইট-ক্লিক করুন এবং 'ইন্সপেক্ট এলিমেন্ট' সিলেক্ট করুন</li>
-</ul>
-
-<p>ইন্সপক্টর এক্টিভেট করার সাথে সাথে ব্রাউজার উইন্ডোর উপরে <a href="/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a> দেখা যাবে।</p>
-
-<p>আপনি যদি 'ইন্সপেক্টর এলিমেন্ট' এ ক্লিক করে ইন্সপেক্টর invoke করে থাকেন তাহলে এলিমেন্ট এরই মধ্যে সিলেক্ট হয়ে থাকবে এবং ইন্সপেক্টরটি নিম্নবণিতভাবে কাজ করবে যেভাবে এটি <a href="#Selecting-Elements" title="#Selecting-Elements">'সিলেক্টিং এলিমেন্টস্'</a> এ কাজ করে।</p>
-
-<p>যদি তা না হয়ে থাকে তাহলে আপনি যখন আপনার মাউস পেজটিতে ঘুরাবেন তখন মাউসের নিচের এলিমেন্ট dotted বডার দিয়ে হাইলাইট হয়ে যাবে এবং একটি অ্যানোটেশন এটির HTML ট্যাগ ডিসপ্লে করবে। একই সাথে, এর HTML ডেফিনেশনও ইন্সপেক্টরের বাঁ দিকের pane কন্টেক্সটে ডিসপ্লে হয়ে যাবে।</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/5323/inspector-no-element-selected.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
-
-<p>এলিমেন্টের উপর ক্লিক করলে তা সিলেক্ট হয়ঃ আপনি একটি এলিমেন্ট সিলেক্ট করে থাকলে ইন্সপেক্টরটি নিচের মত দেখাবে ও কাজ করবে সেভাবে যেভাবে তা নিচের <a href="#Selecting-Elements" title="#Selecting-Elements">"সিলেক্টিং এলিমেন্টস্"</a> এ কাজ কড়ে।</p>
-
-<h2 id="এলিমেন্ট_সিলেক্ট_করা"><a name="Selecting-Elements">এলিমেন্ট সিলেক্ট করা</a></h2>
-
-<p>যখন একটি এলিমেন্ট সিলেক্ট করা হয় তখন তার মার্কআপ ইন্সপেক্টরের বাঁ দিকে HTML paneএ হায়লাইট হয়ে যায় এবং ইন্সপেক্টরের ডান CSS pane এর স্টাইল ইনফরমেশন শো করেঃ</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/6919/inspector-annotated3.png" style="display: block; margin-left: auto; margin-right: auto;">এভাবেই এলিমেন্ট সিলেকশনের বিভিন্ন কাজ উল্লেখযোগ্যভাবে পরিবর্তিত হ্য ফায়ারফক্স 29এ।</p>
-
-<h3 id="ফায়ারফক্স_29_এর_আগে">ফায়ারফক্স 29 এর আগে</h3>
-
-<p>আপনি যখন একবার কোন পেজে একটি এলিমেন্টে ক্লিক করে এটি সিলেক্ট করেন তখনই ইন্সপেক্টর'স ডিসপ্লে সেই এলিমেন্টে লক হয়ে যায়। সেজন্য আপনি অন্য কোন ইন্সপেক্টর না চালু করেই মাউস ঘোরাতে পারেন।</p>
-
-<p>এলিমেন্টের জন্য নির্ধারিত annotationটির ডানদিকে ও বাঁদিকে একটি করে বাটন থাকে। বাঁ দিকের বাটনটি আপনাকে নতুন এলিমেন্ট সিলেক্ট করার সুযোগ দিয়ে পুরনো এলিমেন্ট আনলক করে। ডানদিকের বাটনটি এলিমেন্টটির জন্য একটি <a href="/en-US/docs/Tools/Page_Inspector#Element_popup_menu">পপআপ মেনু</a> ডিসপ্লে করে।</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/6921/inspector-element-annotation.png" style="display: block; height: 167px; margin-left: auto; margin-right: auto; width: 389px;"></p>
-
-<h3 id="ফায়ারফক্স_29_ও_তার_পর">ফায়ারফক্স 29 ও তার পর</h3>
-
-<p>ফায়ারফক্স 29 থেকে পেজের কোন এলিমেন্টের সিলেক্ট করলে এর চারদিকের ডট দেওয়া বর্ডার এবং এর জন্য নির্ধারিত অনোটেশন দেখানো হয় না। এমনকি  এলিমেন্ট সিলেক্ট করার সাথে সাথে ইন্সপেক্টরগুলোও লক হয়ে যায় না। আপনি যখন মারকাপ পেন এর চারদিকে মাউসটি মুভ করেন তখন কোরেস্পন্ডিঙ এলিমেন্টের চারদিকে ডট দেওয়া বর্ডার দেখা জায়।অয়েব পেজের কোন ভিনণ এলিমেন্ট সিলেক্ট করার জন্য "Select element" বাটনটি ক্লিক করুন, যা এখন <a href="/en-US/docs/Tools_Toolbox#Toolbar">Toolbox toolbar</a> দেখা যায়ঃ</p>
-
-<p>{{EmbedYouTube("zBYEg40ByCM")}}</p>
-
-<h2 id="এলিমেন্ট_পপআপমেনু"><a name="Element_popup_menu">এলিমেন্ট পপআপমেনু </a></h2>
-
-<div class="geckoVersionNote">
-<p>ফায়ারফক্স 29 থেকে পরবর্তীতে ওয়েব পেজের অটোনেশন আর দেখা জায় না। তাই শুধুমাত্র HTML পেন এ কনট্যাক্স-ক্লিকিন এর মাধ্যমে পপআপ মেনু ওপেন করতে পারেন</p>
-</div>
-
-<p>পপআপ মেনু ব্যবহার করে আপনি যে কোন নির্দিষ্ট ক্ষেত্রে বেশ কিছু সাধারণ কাজ করতে পাড়েন। আপনি দুইভাবে মেনুটি এক্টিভেট করতে পারেনঃ</p>
-
-<ul>
- <li>ওয়েব পেজের এলিমেন্টে সংযুক্ত অ্যানোটেশনের ডানদিকের বাটনে ক্লিক করুনঃ</li>
-</ul>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/6347/inspector-element-selected-context-menu-cropped.png" style="display: block; height: 291px; margin-left: auto; margin-right: auto; width: 399px;"></p>
-
-<ul>
- <li>কন্টেক্সট - <a href="#HTML_pane">HTML pane</a> র এলিমেন্টে ক্লিক করুনঃ</li>
-</ul>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/6349/inspector-html-context-menu.png" style="display: block; height: 299px; margin-left: auto; margin-right: auto; width: 399px;"></p>
-
-<p>মেনুটি আপনাকে যা যা করতে সুযোগ দেয়ঃ</p>
-
-<ul>
- <li><a href="#Editing_HTML">এলিমেন্টের HTML এডিট করা</a> (শুধুমাত্র ফায়ারফক্স 27 থেকে পরবর্তী)</li>
- <li> ইনার অথবা আউটার HTML কপি করা</li>
- <li> CSS সিলেক্টর কপি করা যা নিজে থেকে এলিমেন্ট সিলএক্ট করে</li>
- <li>এলিমেন্ট ডিলেট করা</li>
- <li><a href="/en-US/docs/Web/CSS/:hover" title="/en-US/docs/Web/CSS/:hover">:hover</a>, <a href="/en-US/docs/Web/CSS/:focus" title="/en-US/docs/Web/CSS/:focus">:focus</a> এবং <a href="/en-US/docs/Web/CSS/:active" title="/en-US/docs/Web/CSS/:active">:active</a> CSS সিউডো-ক্লাসগুলো সেট করা</li>
-</ul>
-
-<h3 id="ডাটা_URL_হিসাবে_ইমেজ_কপি_করা">ডাটা URL হিসাবে ইমেজ কপি করা</h3>
-
-<div class="geckoVersionNote">
-<p>ডাটা URL হিসাবে কপি করা ফায়ারফক্স 29এ নতুন।</p>
-</div>
-
-<p>ফায়ারফক্স 29 থেকে পরবর্তীতে, যদি currently selected এলিমেন্টটি কোন ইমেজ হয় তাহলে পপআপ মেনুতে একটি অপশন থাকে ডাটা ইউ আর এল হিসাবে ক্লিপবোর্ডে ইমেজ কপি করার জন্যঃ</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/7011/inspector-copyasdatauri.png" style="display: block; height: 282px; margin-left: auto; margin-right: auto; width: 529px;"></p>
-
-<h3 id="HTML_এডিট_করা"><a name="Editing_HTML">HTML এডিট করা</a></h3>
-
-<div class="geckoVersionNote">
-<p>HTML এডিট করা শুধুমাত্র ফায়ারফক্স 27 এই সহজলভ্য।</p>
-</div>
-
-<p>কোন এলিমেন্টের <a href="/en-US/docs/Web/API/Element.outerHTML">আউটারHTML</a> এডিট করার জন্য এলিমেন্টের পপআপ মেনু এক্টিভেট করে সিলেক্ট করুন "Edit As HTML"। আপনি HTML paneএ একটি টেক্সট-বক্স দেখবেনঃ</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/6351/inspector-html-edit-html.png" style="display: block; margin-left: auto; margin-right: auto;">আপনি যে কোন HTML এখানে সংযোগ করতে পারবেনঃ এলিমেন্টের ট্যাগ পরিবর্তন করা, existing এলিমেন্ট পরিবর্তন করা আথবা নতুন কোন এলিমেন্ট সংযোগ করা। বক্সের বাইরে ক্লিক করার সাথে সাথে আপনার করা পরিবর্তনগুলো পেজটিতে অ্যাপ্লাই হয়ে যাবে।</p>
-
-<h2 id="HTML_পেন"><a name="HTML_pane">HTML পেন</a></h2>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/5459/inspector-html-toolbar-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"> HTML পেন আপনাকে পেজটির HTML একটি গাছের আকারে দেখায় এটির শাখাগুলো collapsible. নির্ধারিত এলিমেন্টগুলোর শুরুর এবং শেষের ট্যাগগুলো ধূসর পটভূমিতে হাইলাইট করা হয়।</p>
-
-<p>আপনি এই পেনে সরাসরি এডিট করতে পারেন - বিভিন্ন ট্যাগ, অ্যাট্রিবিউটস এবং কন্টেন্টসঃ আপনি যেই এলিমেন্ট এডিট করতে চান তা পরিবর্তন করুন এবং পরিবর্তনগুলো সাথে সাথে দেখতে Enter ক্লিক করুন।</p>
-
-<p>কোন এলিমেন্টে কন্টেক্স-কিল্ক করলে তা ডিসপ্লে করে একটি <a href="#Element_popup_menu">পপআপ মেনু সেই এলিমেন্টে কাজ করার জন্য</a>।</p>
-
-<h3 id="HTML_পেন_টুলবার">HTML পেন টুলবার</h3>
-
-<h3 id="এই_পেইন_টির_উপরে_একটি_ডেডিকেটেড_টুলবার_তিনটি_অংশে_ভাগ_হয়ে_আছেঃ">এই পেইন টির উপরে একটি ডেডিকেটেড টুলবার তিনটি অংশে ভাগ হয়ে আছেঃ</h3>
-
-<div class="geckoVersionNote">
-<p>ফায়ারফক্স 29 থেকে পরবর্তীতে "Select element" বাটনটি <a href="/en-US/docs/Tools_Toolbox#Toolbar">Toolbox </a>এ মুভ করা হয়েছে।</p>
-</div>
-
-<ul>
- <li><em>এলিমেন্ট সিলেক্ট করাঃ </em>এই বাটনটি ক্লিক করলে,আপনি ব্রাউজার উইন্ডোতে শুধুমাত্র মাউস ঘুরিয়ে বিভিন্ন এলিমেন্ট সিলেক্ট করতে পারবেন।</li>
- <li><em>HTML ব্রেড ক্রাম্বস্ঃ যেই ব্রাঞ্চের আওতায় নির্ধারিত এলিমেন্টটি আছে তার সমস্ত </em>hierarchy<em> </em>এটি দেখায়। আপনি যদি বারে কোন এলিমেন্ট ক্লিক করে ধরে থাকেন তাহলে একটি পপআপ মেনু দেখা যাবে যা আপনাকে একটি এলিমেন্টের অংশ সিলেক্ট করার সুযোগ দেয়। বারের বামদিকের ও ডানদিকের শেষের কোণার ছোট তীর চিহ্ণিত আইকনটি ক্লিক করলে সেটি বারটিকে স্ক্রল করবে যদি সেটি স্ক্রিনের থেকেও বড় হয়ে থাকে।</li>
- <li><em>ট্যাগ খোঁজাঃ </em>আপনি যে ট্যাগের জন্য টাইপ করেন তা খুঁজুন এখানে। "Enter" প্রেস করে পরবর্তী অকারেন্স খুঁজে পাবেন।</li>
-</ul>
-
-<h2 id="CSS_পেন">CSS পেন</h2>
-
-<p>CSS পেন কারেন্টলি সিলেক্টেড এলিমেন্টে ব্যবহৃত স্টাইলের তথ্য প্রদর্শন করে। চারটি ভিন্ন ভিন্ন ভিউ আছে এখানেঃ "রুলস্", "কম্পিউটেড", "ফন্টস" এবং "বক্স মডেল"। পেনের সর্ব উপরের টুলবারটি ব্যবহার করে আপনি তাদের মধ্যে সুইচ করতে পারেনঃ</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/5463/inspector-css-toolbar-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
-
-<h3 id="রুলস্_ভিউ">রুলস্ ভিউ</h3>
-
-<p>নির্ধারিত এলিমেন্টে ব্যবহৃত সব রুলস তালিকাবদ্ধ রাখে এই ভিউটি, বিশেষায়িত এর হ্রাসক্রম ভিত্তিতেঃ</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/5467/inspector-css-rules.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
-
-<p>রুলস ভিউ <a href="/en-US/docs/Web/CSS/Pseudo-elements">সিউডো-এলিমেন্টস</a> এবং ব্যবহৃত রুলস তালিকাবদ্ধ করে।</p>
-
-<h4 id="রুল_ডিসপ্লে">রুল ডিসপ্লে</h4>
-
-<p>এটি একটি স্টাইলশীটে প্রত্যেকটি রুল ডিসপ্লে করে, সেক্টর এর একটি লিস্টসহ <code>property:value;</code> ডিকলারেশনের লিস্ট ও থাকে।</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/5659/inspector-css-rules-singlerule-annotated.png" style="display: block; height: 206px; margin-left: auto; margin-right: auto; width: 544px;">যেসব রুল অন্য রুলের বিপক্ষে যায় সেগুলো কেটে দেওয়া হয়েছে। কোন নির্দেশনার উপরে মাউস রাখলে এটির নিচে একটি চেকবক্স দেখা যাবেঃকোন রুল চালু বা বন্ধ করতে আপনি এটি ব্যবহার করতে পারেন।</p>
-
-<h4 id="CSS_ফাইলের_লিঙ্ক">CSS ফাইলের লিঙ্ক</h4>
-
-<p>প্রতিটি রুলের উপরে ডান দিকে ফাইলনেম সোর্স এবং লাইন নাম্বার লিঙ্ক হিসাবে দেখানো হয়ঃ ক্লিক করলে <a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">স্টাইল এডিটর</a> থেকে এটি ওপেন হয়ে যাবে।</p>
-
-<p>ফায়ারফক্স 29 থেকে পরবর্তীতে ইন্সপেক্টর CSS সোর্স ম্যাপ বোঝে। এর মানে হল আপনি যদি CSS প্রিপ্রসেসর ব্যবহার করেন যার সোর্স ম্যাপ সাপোর্ট আছে এবং তা আপনি <a href="/en-US/docs/Tools_Toolbox#Style_Editor">স্টাইল এডিটর সেটিং</a> এ সক্রিয় করেছেন তাহলে লিঙ্কটি আপনাকে প্রকৃত সোরসে নিয়ে যাবে, জেনারেটেড CSS নয়ঃ</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/6947/inspector-css-sourcemap-detail.png" style="display: block; height: 133px; margin-left: auto; margin-right: auto; width: 390px;"></p>
-
-<p>CSS সোর্স ম্যাপ সাপোর্ট সম্পর্কে আরো জানুন <a href="/en-US/docs/Tools/Style_Editor#Source_map_support">স্টাইল এডিটর ডকুমেন্টেশন</a> এ।</p>
-
-<h4 id="রঙ_নমুনা">রঙ নমুনা</h4>
-
-<div class="geckoVersionNote">
-<p>ফায়ারফক্স 27 থেকে পরবর্তীতে, আপনি কালার ভেল্যুর পরে দৃশ্যমান একটি রঙ নমুনা দেখতে পাবেনঃ</p>
-</div>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/6361/inspector-css-color-swatch.png" style="display: block; height: 158px; margin-left: auto; margin-right: auto; width: 487px;"></p>
-
-<h4 id="কালার_পিকার">কালার পিকার</h4>
-
-<div class="geckoVersionNote">
-<p>ফায়ারফক্স 28 থেকে পরবর্তীতে, আপনি রঙ নমুনাতে (color sample) ক্লিক করলে রঙ পরিবর্তন করার জন্য একটি কালার পিকার দেখতে পাবেনঃ</p>
-</div>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/6659/inspector-color-picker.png" style="display: block; height: 321px; margin-left: auto; margin-right: auto; width: 411px;"></p>
-
-<h4 id="পটভূমি-দৃশ্য_পূর্ব_পরিদর্শন">পটভূমি-দৃশ্য পূর্ব পরিদর্শন</h4>
-
-<div class="geckoVersionNote">
-<p>ফায়ারফক্স 27 থেকে পরবর্তীতে, রুলের উপর মাউস ঘোরালে আপনি <a href="/en-US/docs/Web/CSS/background-image">ব্যাকগ্রাউন্ড-ইমেজ বা পটভূমি-দৃশ্য </a> নামে বিভিন্ন ইমেজের বিশেষ ব্যবহৃত একটি প্রিভিউ দেখতে পাবেনঃ</p>
-</div>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/6413/inspector-background-image-preview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
-
-<h4 id="ভিজুয়ালাইজেশন_পরিবর্তন">ভিজুয়ালাইজেশন পরিবর্তন</h4>
-
-<div class="geckoVersionNote">
-<p>ফায়ারফক্স 29এ এটি নতুন।</p>
-</div>
-
-<p>ফায়ারফক্স 29 থেকে পরবর্তী ক্ষেত্রে আপনি রুলস রিভিউতে কোন <a href="/en-US/docs/Web/CSS/transform"><code>ট্রান্সফরম</code></a> প্রপার্টিতে হোভার করলে,আপনি একটি টুলটিপ পাবেন যা আপনাকে দেখাবে এটি যা যা পরিবর্তন করে।</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/7133/transform-tooltip.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
-
-<h4 id="এডিট_করার_নিয়মাবলী">এডিট করার নিয়মাবলী</h4>
-
-<p>আপনি যদি কোন দিক্লারেশ্নে ক্লিক করেন তবে আপনি তার বৈশিষ্ট্যাবলী বা মান সংস্কার করতে পারবেন এবং সাথে সাথেই তা দেখতে পাবেন। একটি রুলে নতুন ডিকলারেশন যুক্ত করার জন্য ক্লিক করুন রুলের সর্বশেষ লাইনটিতে (শেষ বন্ধনী দিয়ে অধিকৃত লাইনটি)। সংস্কার করার সময় যদি আপনি অপ্রচলিত মান বা কোন অজানা বৈশিষ্টের নাম প্রবেশ করান, তবে ডিকলারেশনের নিচে একটি হলুদ সতর্ক সংকেত দেখা যাবে।</p>
-
-<p>আপনার করা যে কোন পরিবর্তনই ক্ষণস্থায়ীঃ পেজটি পুনরায় লোড করলে প্রকৃত স্টাইল রিস্টোর হয়ে যাবে।</p>
-
-<p><strong>Tip:</strong> 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.</p>
-
-<h3 id="কম্পিউটেড_ভিউ">কম্পিউটেড ভিউ</h3>
-
-<p>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:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/5473/inspector-css-computed.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
-
-<p>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:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/5665/inspector-css-computed-show-rule.png" style="display: block; margin-left: auto; margin-right: auto;">By default, it only shows values that have been explicitly set by the page: to see all values, click the "Browser styles" box.</p>
-
-<p>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.</p>
-
-<h3 id="ফন্টস্_ভিউ">ফন্টস্ ভিউ</h3>
-
-<p>সিলেক্টেড এলিমেন্ট অনুযায়ী প্রয়োজনীয় সব ফন্ট দেখায় এটি। মনে রাখবেন, আপনি আপনার সিস্টেমে যে ফন্ট ব্যবহার করেন তাও দেখায় এটি, css এ যে ফন্ট নির্ধারণ করা আছে, তার থেকে এটি আলাদা হতে পারেঃ</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/5469/inspector-css-fonts.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
-
-<p>ফন্ট ভিউতে টেক্সট ভিউ হল "Abc" ডিফল্ট অনুসারে কিন্তু আসলে এটি একটি টেক্সট এরিয়া যা পড়্যোজন মত পরিবর্তন করা যেতে পারে।</p>
-
-<h3 id="বক্স_মডেল_ভিউ">বক্স মডেল ভিউ</h3>
-
-<p>নির্দিষ্ট এই এলিমেন্টে অ্যাপ্লাই করলে এটি <a href="/en-US/docs/Web/CSS/box_model" title="/en-US/docs/Web/CSS/box_model">বক্স মডেল</a> এর একটি গ্রাফিকাল representation দেখায়ঃ</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/5667/inspector-css-box-model.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
-
-<ul>
- <li>At the top-left is the total space taken by the element on the page.</li>
- <li>The outside numbers tell you the margin size on each side of the element.</li>
- <li>The numbers in squares on the borders tell you how wide each side's border is.</li>
- <li>The next layer in shows the padding size on each side of the element.</li>
- <li>Finally, in the center, is the size of the element's content.</li>
-</ul>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/5671/inspector-css-box-model-annotated.png" style="display: block; height: 435px; margin-left: auto; margin-right: auto; width: 680px;"></p>
-
-<h2 id="ওয়েব_কনসোল_এর_সাহায্যে_পেজ_ইন্সপেক্টর_ব্যবহার_করা"> ওয়েব কনসোল এর সাহায্যে পেজ ইন্সপেক্টর ব্যবহার করা</h2>
-
-<p>ওয়েব কনসোলকে আপনি পেজ ইন্সপেক্টর হিসাবেও ব্যবহার করতে পারেন। এমনকি আপনি একটি বোনাস ফিচার ও পIবেন! আপনি যদি পেজ ইন্সপেক্টরে কোন এলিমেন্ট সিলেক্ট করে থাকেন তবে তাও variable <code>$0</code>. ব্যবহার করে ওয়েব কনসোলের জাভাস্ক্রিপ্টে পাঠানো যাবে।<br>
-  </p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/5461/inspector-console.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
-
-<h2 id="ডেভলপার_API">ডেভলপার API</h2>
-
-<p>ফায়ারফক্স এডঅনস্ এই কন্টেক্স chrome://browser/content/devtools/inspector/inspector.xul থেকে নিচের বিভিন্ন অবযেক্টে প্রবেশ করতে পারেঃ</p>
-
-<h3 id="উইন্ডো.ইন্সপেক্টর">উইন্ডো.ইন্সপেক্টর</h3>
-
-<p><a href="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/inspector/inspector-panel.js" title="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/inspector/inspector-panel.js">ইন্সপেক্টর-পেনেল.js</a> এ আলোচিত। বিভিন্ন এট্রিবিউটস্ এবং ফানশনঃ</p>
-
-<ul>
- <li>.নির্ধারণ - ইন্সপেক্টর সেকশন সম্পর্কিত তথ্যঃ
- <ul>
- <li>.isNode() - returns true if selection is node.</li>
- <li>.node - returns the actual element from the page</li>
- <li>.window - the window object of the frame the selection is in.</li>
- </ul>
- </li>
- <li>.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.</li>
-</ul>
-
-<p>Bindable events using on:</p>
-
-<h4 id="মার্কআপ_লোডেড">মার্কআপ লোডেড</h4>
-
-<p>বামদিকের পেনেল রিফ্রেশ করার পর যখন পেজ পরিবর্তন কার হয় তখন এর প্রয়োজন হয়।</p>
-
-<h4 id="ready">ready</h4>
-
-<p>প্রথম মার্কআপ লোডে দরকার হয়।</p>
-
-<h4 id="সিউডোক্লাস">সিউডোক্লাস</h4>
-
-<p>Called after toggle of a pseudoclass.</p>
-
-<h4 id="লে-আউট_পরিবর্তন">লে-আউট পরিবর্তন</h4>
-
-<p>"paint and resize এর মত কম গুরুত্বপূর্ণ পরিবর্তন ইভেন্ট।"</p>
-
-<h2 id="কীবোর্ড_শর্টকাটস">কীবোর্ড শর্টকাটস</h2>
-
-<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "page-inspector") }}</p>
-
-<h3 id="গ্লোবাল_শর্ট-কাটস">গ্লোবাল শর্ট-কাটস</h3>
-
-<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p>
-
-<p>{{ languages( { "ja": "ja/Tools/Page_Inspector"} ) }}</p>
diff --git a/files/bn/tools/style_editor/index.html b/files/bn/tools/style_editor/index.html
deleted file mode 100644
index 54509b86ca..0000000000
--- a/files/bn/tools/style_editor/index.html
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: স্টাইল এডিটর
-slug: Tools/Style_Editor
-translation_of: Tools/Style_Editor
----
-<div>{{ToolsSidebar}}</div><p>স্টাইল সীট এডিটর আপনাকে সক্ষম করবে ঃ</p>
-
-<ul>
- <li>পেজ এর সাথে যুক্ত স্টাইলসীট দেখতে এবং এডিট করতে </li>
- <li>scratch থেকে নতুন স্টাইলসীট তৈরি করতে এবং পেজ তা ব্যবহার করতে</li>
- <li>তৈরিক্রিত স্টাইলসীট নিয়ে আসতে এবং পেজ এ তা ব্যবহার করতে</li>
-</ul>
-
-<p><img alt="IFrame" style="height: 1px; width: 1px;"></p>
-
-<p>স্টাইল এডিটর খুলতে হলে  "Web developer" মেনু থেকে "Style Editor" বাছাই করতে হবে( যা Mac এর "Tools" মেনু এর সাবমেনু)।স্টাইল এডিটর সক্রিয় হউয়ার সাথে সাথে<a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window"> ,Toolbox</a> ব্রাউজার এর পাদদেশ দৃশ্যমান হবে:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/6941/style-editor.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
-
-<p>স্টাইল এডিটর প্রধান দুই ভাগ এ বিভক্ত : বামপাশ এর স্টাইল সীট প্যান , এবং ডানপাশ এর এডিটর।</p>
-
-<h2 id="স্টাইল_সীট_প্যান"><strong>স্টাইল সীট প্যান</strong></h2>
-
-<p>বামপাশ এর স্টাইল সীট, বর্তমান ডকুমেন্ট এর ব্যবহৃত স্টাইলসীট এর তালিকা দিবে।সীট এর নাম এর বামপাশ দেওয়া  eyeball আইকন এ ক্লিক করার মাধ্যমে আপনি দ্রুত গিভেন সীট ব্যবহার এর  অন এবং অফ  এ toggle করতে পারবেন।লিস্ট এ থাকা প্রত্যেক সীট এর কোণার নীচের অংশের ডানদিকে অবস্থিত সেভ বাটন এ ক্লিক করে আপনি আপনার স্টাইল সীট এর যেকোনো পরিবর্তন আপনার লোকাল কম্পিউটার এ সেভ করতে পারবেন।</p>
-
-<h2 id="এডিটর_প্যান"><strong>এডিটর প্যান</strong></h2>
-
-<p>ডানপাশ এর অংশ টি হচ্ছে এডিটর প্যান। এখানে আপনার জন্য নির্বাচিত কয়েকটি স্টাইল সীট এর সোর্স পড়তে এবং এডিট করতে দেওয়া আছে । পেজ এর যেকোনো পরিবর্তন এটিতে অবিলম্বে কাজ করবে। এটি পরীক্ষা করতে,পরিবর্তন করতে এবং সংশোধন করতে সহজ করে তোলে। আপনি যখন আপনার পরিবর্তন নিয়ে সন্তুষ্ট হবেন, তখন স্টাইল সীট প্যান এর এন্ট্রিতে যে সেভ বাটন আছে তাতে ক্লিক করে একটি কপি লোকাল হিসেবে সেভ করতে পারবেন।   </p>
-
-<p>এডিটর আপনার  CSS কে সহজ ভাবে পরার জন্য লাইন সংখ্যা এবং syntax hightiliting দিয়ে থাকে।এতে  কয়েকটি  <a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor#Source_editor_shortcuts">keyboard shortcuts</a> ও সাপোর্ট করে।</p>
-
-<p> স্টাইল এডিটর অরিজিনাল টি কে পরিবর্তন না করে,সক্রিয় ভাবে de-minimize করে।এটি খুব অনুকুলে সহজ ভাবে পেজে কাজ করতে সাহায্য করে।</p>
-
-<h2 id="অটোকমপ্লিট"><strong>অটোকমপ্লিট </strong></h2>
-
-<h4 id="অটোকমপ্লিট_ফায়ারফক্স_২৯_এ_নতুন">অটোকমপ্লিট  ফায়ারফক্স ২৯ এ নতুন</h4>
-
-<p>ফায়ারফক্স ২৯ হতে,স্টাইল এডিটর অটোকমপ্লিট সমর্থন করে।টাইপ শুরু করলে ইহা সাজেশন প্রস্তাব করে।</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/6943/style-editor-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;">আপনি এটি <a href="/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings</a> এ বন্দধ করে দিতে পারবেন</p>
-
-<h3 id="স্টাইলসীট_তৈরি_করা_এবং_আমদানি_করা"><strong>স্টাইলসীট তৈরি করা এবং আমদানি করা</strong></h3>
-
-<p>টুলবার এর নিউ বাটন এ ক্লিক করে আপনি নতুন স্টাইল সীট তৈরি করতে পারবেন।এরপর আপনি নতুন এডিটর এ  CSS দেয়ার মাধ্যমে শুরু করতে পারেন এবং নতুন স্টাইল যা ব্যবহার করেছেন তা দেখতে পারবেন অন্যান্য সীট এর মত সরাসরি।</p>
-
-<p>আপনি ডিস্ক থেকে স্টাইল সীট লোড করতে পারবেন এবং ইম্পোর্ট বাটন এ ক্লিক করে পেজ এ ব্যবহার করতে পারবেন।</p>
-
-<h3 id="সোর্স_ম্যাপ_সাপোর্ট"><strong>সোর্স ম্যাপ সাপোর্ট</strong></h3>
-
-<div class="geckoVersionNote">
-<p>CSS সোর্স ম্যাপ সাপোর্ট ফায়ারফক্স ২৯ এ নতুন বৈশিষ্ট্</p>
-</div>
-
-<p>{{EmbedYouTube("zu2eZbYtEUQ")}}</p>
-
-<p>প্রি প্রসেসর যেমন  <a href="http://sass-lang.com/">Sass</a>, <a href="http://lesscss.org/">Less</a>, অথবা <a href="http://learnboost.github.io/stylus/">Stylus</a> ব্যবহার করে ওয়েব ডেভেলপাররা প্রায়ই CSS ফাইল তৈরী করে।এই টুল আরও গরীয়ান এবং অভিবাক্তপূর্ণ শব্দবিন্যাস থেকে CSS ফাইল  তৈরী করতে সাহায্য করে। আপনি যদি এটি করেন তাহলে দেখতে পাবেন যে,তৈরীক্রিত CSS দেখতে পাওয়া এবং এডিট করা তেমন সুবিধা জনক না,কারন যে কোড আপনি ধারন করছেন তা প্রি প্রসেসর শব্দবিন্যাস,আপনার তৈরীক্রিত নয়। তাই আপনাকে তৈরীক্রিত CSS এডিট করতে হবে তারসাথে এটি পুনরাই অরিজিনাল সোর্স এ মানুয়াল্-ই কাজ করাতে হবে।</p>
-
-<p>সোর্স ম্যাপ টুল গুলো আপনাকে তৈরীক্রিত CSS থেকে অরিজিনাল শব্দবিন্যাস  এ ফিরিয়ে আনতে সাহায্য করে,যাতে তাদের দেখা যায় এবং অরিজিনাল শব্দবিন্যাস এর ফাইল গুলো কে আপনি এডিট করতে পারেন।ফায়ারফক্স ২৯ স্টাইল এডিটর CSS সোর্স ম্যাপ ধরতে পারে।</p>
-
-<p>এটার মানে এই যে,ধরুন আপনি  Sass দিলেন তাহলে স্টাইল এডিটর আপনাকে  Sass ফাইল দেখাবে এবং এডিট করতে দিবে,তাদের তৈরী CSS নয় :</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/6939/style-editor-sourcemap-820.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
-
-<p>এইটা কাজ করানোর জন্য আপনার উচিত :</p>
-
-<ul>
- <li>CSS প্রসেসর ব্যবহার করতে হবে যা  <a href="https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit">Source Map Revision 3 proposal</a> বুঝতে পারে। বর্তমানে এটা <a href="http://davidwalsh.name/future-sass">3.3.0 prerelease version of Sass</a> অথবা <a href="http://roots.io/using-less-source-maps/">1.5.0 version of Less </a>কে বুঝায়।অন্যান্য প্রি প্রসেসর সরাসরি ভাবে এটাকে সাপোর্ট করতে বা ধরতে কাজ করছে।</li>
- <li>আসলে প্রসেসর কে সোর্স ম্যাপ তৈরী করতে নির্দেশ দিতে হবে, যেমন  --sourcemap আর্গুমেন্ট টি Sass কমান্ড-লাইন টুল এ পাস করা।</li>
- <li>ফায়ারফক্স ২৯ অথবা পরবর্তী ফায়ারফক্স ব্যবহার করা।</li>
-</ul>
-
-<h3 id="অরিজিনাল_সোর্স_গুলো_দেখা"><strong>অরিজিনাল সোর্স গুলো দেখা</strong></h3>
-
-<p>এখন আপনি যদি  <a href="https://developer.mozilla.org/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings</a> এর "Show original sources" টি দেখেন, <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#Rules_view">Rules view</a>  এর CSS রুল গুলো এর পরবর্তী লিংক স্টাইল সীট এর অরিজিনাল সোর্স এ নিয়ে যাবে।</p>
-
-<h3 id="এডিট_অরিজিনাল_সোর্স"><strong>এডিট অরিজিনাল সোর্স</strong></h3>
-
-<p>আপনি স্টাইল এডিটর এর অরিজিনাল সোর্স গুলো এডিট করতে পারবেন এবং যা ব্যবহার করা হয়েছে তা ঠিক তখনি সরাসরি দেখা যাবে।এটা কে কাজ করানোর জন্য আরও দুটি স্টেপ আছে।</p>
-
-<p>প্রথমে,আপনার প্রসেসর টিকে এমন ভাবে তৈরী করুন যাতে তা অরিজিনাল সোর্স কে দেখতে পারে এবং নিজস্ব ভাবে CSS তৈরী করে সোর্স পরিবর্তন করার সাথে সাথে। Sass এ আপনি --watch অপশন টি দেওয়ার মাধ্যমে কাজ টি করতে পাড়েন:</p>
-
-<p>sass index.scss:index.css --sourcemap --watch</p>
-
-<p>পরবর্তী তে,ফাইল এর পাশে "Save" বাটন এ ক্লিক করে স্টাইল এডিটর থেকে অরিজিনাল সোর্স সেভ করতে হবে, এবং অরিজিনাল ফাইল এ সেভ করতে হবে।</p>
-
-<p>এখন আপনি যখন স্টাইল এডিটর এর সোর্স ফাইল পরিবর্তন করবেন,CSS একাই তৈরী হবে এবংপরিবর্তন টি আপনি তখন-ই দেখতে পারবেন।</p>
-
-<h2 id="কীবোর্ড_শর্টকাট"><strong>কীবোর্ড শর্টকাট</strong></h2>
-
-<h3 id="সোর্স_এডিটর_শর্টকাট"><strong>সোর্স এডিটর শর্টকাট</strong></h3>
-
-<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}</p>
-
-<p>{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}</p>